需求分析：项目中引用多个后台服务，经常需要更换域名，如果将配置文件打包，修改时将造成一定的困难，因此想将配置文件不进行打包，直接暴露出来
1、首先在public目录下建立"urlConfig.js"项目，并在index.html文件中进行引用
// urlConfig.js
window.urlConfig = {
api1: "http://123.21.1.13:3333",
api1: "http://123.21.2.13:3333",
api1: "http://123.21.3.13:3333",
add: function(a, b) {
return a+b
}
}
//index.html
<head>
...
<title>something</title>
//在此处进行引入urlConfig.js文件
<script src="<%= BASE_URL %>urlConfig.js"></script>
</head>
2、在项目目录下建立"vue.config.js"
module.exports = {
configureWebpack: {
externals: {
//此处引号中的urlConfig必须和window.urlConfig一致
urlConfig: "urlConfig"
}
}
}
3、在main.js中直接引用
const urlConfig = require("urlConfig");
//控制台将打印：http://123.21.1.13:3333
console.log(urlConfig.api1);
//即可在全局进行引用，采用this.$urlConfig进行调用
Vue.prototype.$urlConfig = urlConfig;
4、vue执行npm run build 后
项目中就会有urlConfig.js文件，并没有被打包
网友评论