如何修改Vue打包後文件的接口地址配置

一、背景

常規的vue項目分爲本地環境和生產環境，咱們只要對 config 文件夾下的 dev.env.js 和 prod.env.js 作相應的配置便可。可是最近在作的項目中，涉及到私有化部署，就是對應的生產環境的地址，不是惟一的。若是每次都修改一個地址，再打包文件進行部署，過程繁瑣且低效。那麼如何把環境地址設置成可配置的，不須要再構建代碼就能直接生效呢？

二、可選方案

進行了調研後，網上介紹的方案有2種：

• 1）在static上設置一個config.js，把配置的參數設置成 window 下的全局變量。這種方案的確可行，可是，可是，不安全！！！ 若是請求地址被惡意修改，後果不太好~
• 2）使用 generate-asset-webpack-plugin 插件，配置一大坨後生成一個靜態文件，而後經過請求的方式，獲取須要的數據，這種方法能夠解決安全性問題，可是，可是，有點小麻煩啊~
  所以，博主根據實際項目，將兩種方法結合在一塊兒，造成了一箇中和的方案。

三、執行方案

配置步驟

第一步：在 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的值，就能夠保證接口請求可以準確獲取到了~