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()放在請求裡執行，是防止請求與頁面渲染之間的時間差異化導致值獲取不到，因此這樣比較保險。

// 定義外部介面可配置
import axios from 'axios'
let startApp = function () {
 axios.get('/static/config.json').then((res) => {
  // 基礎地址
  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 檔案中，可以呼叫Vue後再使用：

import Vue from 'vue'
console.log(Vue.prototype.BASE_URL)
// http://webhmy.com

打包修改

執行 npm run build 可以看到打包資料夾 static 資料夾下的 config.json，之後可以修改配置，重新整理頁面即可。

【補充】
因為請求和打包操作的時差性，哪怕它是請求本地的檔案，但是有時發現它的請求會比我們系統的第一個請求慢了，這個時候就會失效。

解決方法：相信我們的專案中都對請求進行了一些封裝操作，只要將對應的baseURL的值改成實時獲取Vue.prototype.BASE_URL的值，就可以保證介面請求能夠準確獲取到了~

到此這篇關於如何修改Vue打包後文件的介面地址配置的方法的文章就介紹到這了,更多相關Vue打包後接口地址配置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！