1、背景
常規的vue項目分為本地環境和生產環境，我們只要對?config?文件夾下的?dev.env.js?和?prod.env.js?做相應的配置即可。但是最近在做的項目中，涉及到私有化部署，就是對應的生產環境的地址，不是唯一的。如果每次都修改一個地址，再打包文件進行部署，過程繁瑣且低效。那么如何把環境地址設置成可配置的，不需要再構建代碼就能直接生效呢？
2、可選方案
進行了調研后，網上介紹的方案有2種：
1）在static上設置一個config.js，把配置的參數設置成?window?下的全局變量。這種方案的確可行，但是，但是，不安全！！！?如果請求地址被惡意修改，后果不太好~
2）使用?generate-asset-webpack-plugin?插件，配置一大坨后生成一個靜態文件，然后通過請求的方式，獲取需要的數據，這種方法可以解決安全性問題，但是，但是，有點小麻煩啊~
因此，博主根據實際項目，將兩種方法結合在一起，形成了一個中和的方案。
3、執行方案
配置步驟
第一步：在?static?文件夾中新建一個?config.json，把你要寫的配置寫入
{// 基本訪問地址"BASE_URL":"http://webhmy.com"}
放在static下的文件，可以被直接訪問。
第二步：在?main.js?中請求定義的配置文件，并放到?Vue.prototype?中，使全局可訪問，注意，這里把new Vue()放在請求里執行，是防止請求與頁面渲染之間的時間差異化導致值獲取不到，因此這樣比較保險。
// 定義外部接口可配置importaxiosfrom'axios'letstartApp =function(){? axios.get('/static/config.json').then((res) =>{// 基礎地址Vue.prototype.BASE_URL = res.BASE_URL;newVue({el:'#app',? ? ? router,? ? ? store,components: {? ? ? ? App? ? ? },template:'<App/>'})? })}startApp()
第三步：如果在?.vue?文件中使用：
console.log(this.BASE_URL)// http://webhmy.com
如果在一些?.js?文件中，可以調用Vue后再使用：
importVuefrom'vue'console.log(Vue.prototype.BASE_URL)// http://webhmy.com
打包修改
執行?npm run build?可以看到打包文件夾?static?文件夾下的?config.json，之后可以修改配置，刷新頁面即可。
【補充】
因為請求和打包操作的時差性，哪怕它是請求本地的文件，但是有時發現它的請求會比我們系統的第一個請求慢了，這個時候就會失效。
解決方法：相信我們的項目中都對請求進行了一些封裝操作，只要將對應的baseURL的值改成實時獲取Vue.prototype.BASE_URL的值，就可以保證接口請求能夠準確獲取到了~
