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

需求

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中的使用

遍历使用 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){ %>

<% }}) %>

参考阅读