vue-cli打包項目后，可以修改配置文件

問題：

前端需要修改后台服務器地址url，寫好的配置文件會在npm run build 后壓縮在一起，傳到運行的前端服務器上后，需要到前端打包的源碼，找到url地址進行修改。如果不在打包的源碼修改，則需要重新npm run build,然后再把整個dist再重新傳到前端服務器，才可以。

解決方案：

用了generate-asset-webpack-plugin 這個插件，在webpack.prod.conf.js中去生成configServer.json文件，讓其在build的時候生成json文件，然后再使用axios異步獲取json，替換url即可。

具體步驟：
第一：先安裝generate-asset-webpack-plugin插件

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

第二：在build/webpack.prod.conf.js里面配置

讓打包的時候輸出可配置的文件內容

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

讓打包的時候輸入可配置的文件名，將會輸出一個名為serverconfig.json的文件。

plugins: [
    new GenerateAssetPlugin({
        filename: 'serverconfig.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        },
        extraFiles: []
    })
    ......
]

第三：在需要獲取配置文件內容的地方編寫以下代碼；
用cookie存儲起來，方便其他地方獲取。

axios.get("serverconfig.json").then((result)=>{
	Vue.prototype.$cookieStore.setCookie("ApiUrl", result.data.ApiUrl, 30*24*60*60*100);
	console.log(result.data.ApiUrl,'123');
}).catch((error)=>{console.log(error)});

這樣上傳到服務器，隨時都可以更改serverconfig.json文件里面的內容了。