1铁坎、背景
常規(guī)的vue項(xiàng)目分為本地環(huán)境和生產(chǎn)環(huán)境蜂奸，我們只要對?config?文件夾下的?dev.env.js?和?prod.env.js?做相應(yīng)的配置即可。但是最近在做的項(xiàng)目中硬萍，涉及到私有化部署扩所，就是對應(yīng)的生產(chǎn)環(huán)境的地址，不是唯一的朴乖。如果每次都修改一個(gè)地址祖屏，再打包文件進(jìn)行部署，過程繁瑣且低效买羞。那么如何把環(huán)境地址設(shè)置成可配置的袁勺，不需要再構(gòu)建代碼就能直接生效呢？
2畜普、可選方案
進(jìn)行了調(diào)研后期丰，網(wǎng)上介紹的方案有2種：
1）在static上設(shè)置一個(gè)config.js，把配置的參數(shù)設(shè)置成?window?下的全局變量漠嵌。這種方案的確可行咐汞，但是，但是儒鹿，不安全；骸！约炎！?如果請求地址被惡意修改植阴，后果不太好~
2）使用?generate-asset-webpack-plugin?插件，配置一大坨后生成一個(gè)靜態(tài)文件圾浅，然后通過請求的方式掠手，獲取需要的數(shù)據(jù)，這種方法可以解決安全性問題狸捕，但是喷鸽，但是，有點(diǎn)小麻煩啊~
因此灸拍，博主根據(jù)實(shí)際項(xiàng)目做祝，將兩種方法結(jié)合在一起，形成了一個(gè)中和的方案鸡岗。
3混槐、執(zhí)行方案
配置步驟
第一步：在?static?文件夾中新建一個(gè)?config.json，把你要寫的配置寫入
{// 基本訪問地址"BASE_URL":"http://webhmy.com"}
放在static下的文件轩性，可以被直接訪問声登。
第二步：在?main.js?中請求定義的配置文件，并放到?Vue.prototype?中，使全局可訪問悯嗓，注意件舵，這里把new Vue()放在請求里執(zhí)行，是防止請求與頁面渲染之間的時(shí)間差異化導(dǎo)致值獲取不到绅作，因此這樣比較保險(xiǎn)芦圾。
// 定義外部接口可配置importaxiosfrom'axios'letstartApp =function(){? axios.get('/static/config.json').then((res) =>{// 基礎(chǔ)地址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?文件中，可以調(diào)用Vue后再使用：
importVuefrom'vue'console.log(Vue.prototype.BASE_URL)// http://webhmy.com
打包修改
執(zhí)行?npm run build?可以看到打包文件夾?static?文件夾下的?config.json俄认，之后可以修改配置，刷新頁面即可洪乍。
【補(bǔ)充】
因?yàn)檎埱蠛痛虬僮鞯臅r(shí)差性眯杏，哪怕它是請求本地的文件，但是有時(shí)發(fā)現(xiàn)它的請求會比我們系統(tǒng)的第一個(gè)請求慢了壳澳，這個(gè)時(shí)候就會失效岂贩。
解決方法：相信我們的項(xiàng)目中都對請求進(jìn)行了一些封裝操作，只要將對應(yīng)的baseURL的值改成實(shí)時(shí)獲取Vue.prototype.BASE_URL的值巷波，就可以保證接口請求能夠準(zhǔn)確獲取到了~
