Vue根页面index.html中注入变量(htmlWebpackPlugin.options的使用,简单使用及遍历)
`webpack` 中使用 `HtmlWebpackPlugin` 的用法,自动引入打包输出的所有资源(**JS/css**)
·
需求
index.html
中的一些插件需要根据环境的不同,访问不同的地址
要在根页面 检测到不同的环境,并且拼上对应的地址前缀
解决方案
1.webpack
中使用 HtmlWebpackPlugin
的用法,自动引入打包输出的所有资源(JS/css)
2.在 vue-cli3
脚手架中,vue
并不希望我们直接操作 webpack
的配置文件,这样容易产生冲突,所以采用了一种 chainWebpack
的方法。
Code
-
简单使用
vue.config.js
文件//每个环境对应的域名,不加前面的协议,这样可以根据当前项目所在的协议自动适配 const DeployEnvInfo={ dev:"//develop..com", pre:"//pre.com", prod:"//pros.com" }; module.exports = { ...otherConfig,// 此处是其他的一些自己项目的打包配置,因人而异 chainWebpack(config) { config.plugin('html').tap((args) => { //标题 args[0].url = DeployEnvInfo[process.env.Deploy_Env||'dev']; return args; }) }, }
index.html中的使用
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.url %>/xxx.js"></script>
-
遍历使用
vue.config.js
文件//每个环境对应的域名,不加前面的协议,这样可以根据当前项目所在的协议自动适配 const DeployEnvInfo={ dev:"//develop..com", pre:"//pre.com", prod:"//pros.com" }; const cdn={ js: [ "/dist/vue.min.js", "/dist/vuex.min.js", "/dist/vue-i18n.min.js", ] } module.exports = { ...otherConfig,// 此处是其他的一些自己项目的打包配置,因人而异 chainWebpack(config) { config.plugin('html').tap((args) => { //标题 args[0].url = DeployEnvInfo[process.env.Deploy_Env||'dev']; args[0].cdn = cdn return args; }) }, }
index.html中的使用
<% htmlWebpackPlugin.options.cdn.js.forEach(function(item){ if(item){ %> <script type="text/javascript" src="<%= htmlWebpackPlugin.options.url %><%= item %>"></script> <% }}) %>
更多推荐
已为社区贡献2条内容
所有评论(0)