您好,登錄后才能下訂單哦!
這篇文章主要講解了修改Vue打包后文件的接口地址配置的方法,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
1、背景
常規(guī)的vue項目分為本地環(huán)境和生產(chǎn)環(huán)境,我們只要對 config
文件夾下的 dev.env.js
和 prod.env.js
做相應(yīng)的配置即可。但是最近在做的項目中,涉及到私有化部署,就是對應(yīng)的生產(chǎn)環(huán)境的地址,不是唯一的。如果每次都修改一個地址,再打包文件進(jìn)行部署,過程繁瑣且低效。那么如何把環(huán)境地址設(shè)置成可配置的,不需要再構(gòu)建代碼就能直接生效呢?
2、可選方案
進(jìn)行了調(diào)研后,網(wǎng)上介紹的方案有2種:
1)在static上設(shè)置一個config.js
,把配置的參數(shù)設(shè)置成 window
下的全局變量。這種方案的確可行,但是,但是,不安全?。?! 如果請求地址被惡意修改,后果不太好~
2)使用 generate-asset-webpack-plugin
插件,配置一大坨后生成一個靜態(tài)文件,然后通過請求的方式,獲取需要的數(shù)據(jù),這種方法可以解決安全性問題,但是,但是,有點小麻煩啊~
因此,博主根據(jù)實際項目,將兩種方法結(jié)合在一起,形成了一個中和的方案。
3、執(zhí)行方案配置步驟
第一步:在 static
文件夾中新建一個 config.json
,把你要寫的配置寫入
{ // 基本訪問地址 "BASE_URL": "http://webhmy.com" }
放在static
下的文件,可以被直接訪問。
第二步:在 main.js
中請求定義的配置文件,并放到 Vue.prototype
中,使全局可訪問,注意,這里把new Vue()
放在請求里執(zhí)行,是防止請求與頁面渲染之間的時間差異化導(dǎo)致值獲取不到,因此這樣比較保險。
// 定義外部接口可配置 import axios from 'axios' let startApp = function () { axios.get('/static/config.json').then((res) => { // 基礎(chǔ)地址 Vue.prototype.BASE_URL = res.BASE_URL; new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) }) } startApp()
第三步:如果在 .vue
文件中使用:
console.log(this.BASE_URL) // http://webhmy.com
如果在一些 .js
文件中,可以調(diào)用Vue后再使用:
import Vue from 'vue' console.log(Vue.prototype.BASE_URL) // http://webhmy.com
打包修改
執(zhí)行 npm run build
可以看到打包文件夾 static
文件夾下的 config.json
,之后可以修改配置,刷新頁面即可。
【補(bǔ)充】
因為請求和打包操作的時差性,哪怕它是請求本地的文件,但是有時發(fā)現(xiàn)它的請求會比我們系統(tǒng)的第一個請求慢了,這個時候就會失效。
解決方法:相信我們的項目中都對請求進(jìn)行了一些封裝操作,只要將對應(yīng)的baseURL的值改成實時獲取Vue.prototype.BASE_URL的值,就可以保證接口請求能夠準(zhǔn)確獲取到了~
看完上述內(nèi)容,是不是對修改Vue打包后文件的接口地址配置的方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。