Vue-cli3.0讀取外部化配置文件來修改公共路徑

　　之前我寫過一篇通過vue-cli3.0打包發布到nginx配置代理轉發的博客，鏈接在此：https://www.cnblogs.com/jdWu-d/p/12197156.html，正常來說也是正確的，但不正常之處在了甲方還用了F5負載均衡和gateway來代理轉發。所以之前我認為的請求->nginx轉發代理->后端服務，實際上是請求->nginx代理轉發->F5->gateway代理轉發->后端服務，所以nginx代理轉發是多余的，浪費效率，目前的nginx僅僅作為web發布容器。被架構師一頓P，還是太年輕了，那就改吧。

　　以我目前項目的vue-cli3.0為例，讀取外部化配置文件來修改公共路徑，vue-cli2.0也大差不差。首先，在public目錄下，新建一個文件，我命名為serverConfig.json，具體如圖1所示，里面配了一個baseURL。

圖1 外部化配置文件serverConfig.json

　　然后，在main.js里面定義一個讀取這個文件的方法，在初始化的時候讀取這個文件。

import Vue from 'vue'
import App from './App'
// 發送請求
Vue.prototype.$axios = axios;

function getServerConfig () {
  return new Promise ((resolve, reject) => {
    axios.get('./serverConfig.json').then(data => {
      console.log("讀取外部化配置文件>>>>>>>>")
      console.log(data)  // 是否成功讀取需要的配置項
      for (let key in data) {
        Vue.prototype["$"+key] = data[key];
      }
      console.log(Vue.prototype.$baseURL)  // 驗證是否已經把屬性掛載在了Vue的原型上
      resolve();
    }).catch(error => {
      console.log(error);
      reject()
    })
  })
}

async function init() {
  await getServerConfig();
}

let app = new Vue({
  router,
  store,
  render: h => h(App),
  created() {
    init();
  },
}).$mount('#app')
export default app;

建議：如果寫法為Vue.prototype[key] = data[key];然后別的頁面，直接this.key也是可以調用的。但是我個人建議寫法為Vue.prototype["$"+key] = data[key];那這樣別的頁面調用的時候就是this.$key，這樣就可以和頁面里的data函數里調用數據時的this.key區別開來。

圖2 系統初始化頁面讀取外部化配置文件控制台打印輸出

　　然后，在需要請求的頁面這樣寫：

this.$axios.get(this.$baseURL + '/a/b').then(data => {
    //to do
  });

可以參考下我寫的：

 

 圖3 參考代碼

 

 圖4 參考代碼執行后的結果

　　確認無誤，打包，在dist包中能找到之前我們的配置文件，如圖5所示。之后的公共路徑如果有變動就可以前端包里的外部化配置文件里直接修改，且修改之后不需要再次打包。利用好這個功能，可以配置很多需要外部修改的屬性。

圖5 前端dist包里的配置文件serverConfig.json

　　這里有個問題得記錄下，直接點開dist包的html頁面讀取外部化配置文件會報錯，如圖6所示，報錯信息提示很明顯了，這是因為跨域只支持http，data，chrome，chrome-extension（chrome擴展插件），https等協議，而我們這個是file協議。所以不要慌，當我們把這個包丟到服務器上的時候走的就是http協議就是ok的了。

 圖6 file協議跨域報錯