vue打包后生成可配置文件，用于修改接口路径等

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文件，修改接口后生效

如果你有更好的方法也请留言哦。。。