解決方法：（共有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 GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
在我們輸入 npm run build 打包之后，在根目錄就會生成serverconfig.json文件。
第三步：如果有需要修改域名之類的 可在 serverConfig.json 修改
第四步：獲取 ApiUrl
//在main.js中定義一個全局函數
Vue.prototype.getConfigJson=function(){
this.$http.get("serverconfig.json").then((result)=>{
//用一個全局字段保存ApiUrl 也可以用sessionStorage存儲
Vue.prototype.ApiUrl=result.body.ApiUrl;
}).catch((error)=>{console.log(error)});
}
第五步：使用ApiUrl
//在app.vue里面 執行this.getConfigJson();
mounted:function(){
this.getConfigJson();
}
var url=this.ApiUrl+'/baidu/....
ApiUrl 在這里已經是全局的了 所以我們可以直接用 this.ApiUrl
2、第二個方法
此方法其實就是在 vue-cli 里把我們需要配置修改的文件直接進行抽離，不讓 webpack 把配置文件進行編譯。
第一步：在 static 文件夾下新建一個名為 config.js 的文件
接下來 就是配置 config 的內容啦
這里將所有的配置注入到window對象的一個屬性里面，我們可以自定義這個屬性
第二步：在index.html里面引入這個config.js
第三步：我們配置好之后就可直接調用
在我們打包之后 可以看到 config 文件會原樣輸出並沒有被打包。 這樣當我我們把項目交給部署人員的時候，部署人員可以直接通過該文件來修改配置內容啦。