起因
最近在做一个项目的时候,由于粗心没有改测试环境的后台接口地址,打包发布到了服务器。换成正式的地址又要重新打包,觉其繁琐,故阅众多文档,得其一方法。
解决方案
首先安装了【generate-asset-webpack-plugin 】这个插件,然后在webpack.prod.conf.js中去生成configServer.json文件,再去build的时候就会生成这个文件,最后再在main.js中使用axios异步获取json,
把配置挂载到vue 的全局变量中。
1、使用的插件
cnpm i generate-asset-webpack-plugin -S
2、webpack.prod.conf.js里面配置
//打包的时候输出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin');
var createServerConfig = function(compilation) {
let configJson= {
"defaultVersion": "Sys",
"isEnableDeployUrl": "false",
"deployUrl": "http://wwww.xxx.com",
"developmentUrl": "http://localhost:61301"
};
return JSON.stringify(configJson);
}
上面的configJson 我是设置了初始值。然后在webpackConfig 的 plugins里面加了如下代码,
new GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
}),
这样就可以在打包的时候生成 serverconfig.json 这个配置文件了
3、在main.js 里面的
axios.get('./serverconfig.json').then(res => {
Vue.prototype.config = res.data;
init();
});
function init() {
new Vue({
el: '#app',
router,
store,
render: h => h(App),
created() {}
})
}
我把读取的配置全部挂载在vue的原型链上,这样我在可以在全局使用这个配置了。这里需要注意的是,需要将这个配置文件读取成功后再实例化Vue,这样可以保证在所以请求之前读取配置文件。
下面是我项目中用到的截图
这样就可以实现动态配置了。