Vue根页面index.html中注入变量（htmlWebpackPlugin.options的使用,简单使用及遍历）

需求

index.html中的一些插件需要根据环境的不同，访问不同的地址
要在根页面 检测到不同的环境，并且拼上对应的地址前缀

解决方案

1.webpack 中使用 HtmlWebpackPlugin 的用法，自动引入打包输出的所有资源（JS/css）
2.在 vue-cli3 脚手架中，vue 并不希望我们直接操作 webpack 的配置文件，这样容易产生冲突，所以采用了一种 chainWebpack 的方法。

Code

1. 简单使用

   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>
   

2. 遍历使用

   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>
       <% }}) %>