vue打包发布后，如果接口地址等发生变更，需要重新打包，过于繁琐。因此需要将一些例如接口地址、网站参数等拿出来动态配置。
具体步骤如下：
1、安装generate-asset-webpack-plugin插件
npm install generate-asset-webpack-plugin --save-dev
2、在vue.config.js中配置如下：
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const createServerConfig = function(compilation) {
let serverConfig={
InterfaceURL:"http://192.168.1.151:8809",//接口地址
};
return JSON.stringify(serverConfig);
}
module.exports = {
configureWebpack: {
plugins: [
new GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
]
}
}
3、使用
在main.js中全局引入
//axios拦截，获取外部配置信息
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
}else if(process.env.NODE_ENV == 'production'){
axios.get('serverconfig.json').then(res=>{
if(res.data.InterfaceURL){
axios.defaults.baseURL = res.data.InterfaceURL; //接口地址
// Vue.prototype.interface_url=res.data.InterfaceURL
}
4、打包后dist下生成.json文件，修改接口后生效
如果你有更好的方法也请留言哦。。。
