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)。

// 定義外部接口可配置
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ǔ)充】
因?yàn)檎埱蠛痛虬僮鞯臅r(shí)差性，哪怕它是請求本地的文件，但是有時(shí)發(fā)現(xiàn)它的請求會(huì)比我們系統(tǒng)的第一個(gè)請求慢了，這個(gè)時(shí)候就會(huì)失效。

解決方法：相信我們的項(xiàng)目中都對請求進(jìn)行了一些封裝操作，只要將對應(yīng)的baseURL的值改成實(shí)時(shí)獲取Vue.prototype.BASE_URL的值，就可以保證接口請求能夠準(zhǔn)確獲取到了~

到此這篇關(guān)于如何修改Vue打包后文件的接口地址配置的方法的文章就介紹到這了,更多相關(guān)Vue打包后接口地址配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論