webpack 打包vue项目后生成一个可修改接口地址的配置文件。

当我们做完vue项目打包、转测试、部署后，却遇到修改接口地址，或修改域名。但是在npm run build 之后所生成的 dist 文件也是写死的了。我们就需要回来重新修改，重新打包。 no no no 一想都觉得麻烦哎。

所以最好解决方案就是有个 config 文件方便我们管理这些。

解决方法：（共有2个方法）

1、借助插件  generate-asset-webpack-plugin 。在webpack.prod.conf.js中去生成configServer.json文件，让其在build的时候生成json文件，然后再使用axios异步获取json，替换url即可。

第一步：安装插架

npm install generate-asset-webpack-plugin --save-dev

 

第二步：配置 webpack.prod.config.js 文件

·让其打包的时候输出可配置的文件。

var GenerateAssetPlugin = require(‘generate-asset-webpack-plugin‘); 
var createServerConfig = function(compilation){
  let cfgJson={ApiUrl:"http://www.adoctors.cn"};
  return JSON.stringify(cfgJson);
}

让其打包的时候输入可配置文件

    new GenerateAssetPlug