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協議跨域報錯