vue webapck打包动态修改后台接口地址，或者配置文件

起因

最近在做一个项目的时候，由于粗心没有改测试环境的后台接口地址，打包发布到了服务器。换成正式的地址又要重新打包，觉其繁琐，故阅众多文档，得其一方法。

解决方案

首先安装了【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，这样可以保证在所以请求之前读取配置文件。

下面是我项目中用到的截图


这样就可以实现动态配置了。