背景
- 部署后如果更改了baseURL，每次更改都要重新打包一次過于麻煩
- 通過以下配置，可以在yarn build生成的文件夾下面的config.json直接修改，不需要每次重新打包
解決步驟
- 在 static 文件夾中新建一個 config.json，把你要寫的配置寫入（若是vuecli3以上版本，沒有static文件，則放在public下面）
{
"BASE_URL": "http://192.168.99.132:8080/topcheer"
}
- 在 main.js 中請求定義的配置文件，并放到 Vue.prototype 中，使全局可訪問
- 注意，這里把new Vue()放在請求里執(zhí)行，是防止請求與頁面渲染之間的時間差異化導(dǎo)致值獲取不到，因此這樣比較保險。
- 如果config.json是放在public文件夾則請求路徑直接是'/config.json'，因為 / 直接指向項目下的public文件夾
// 定義外部接口可配置
import axios from 'axios'
let startApp = function () {
//如果是public文件夾則路徑直接是'/config.json'，因為/直接指向項目下的public文件夾
axios.get('/config.json').then((res) => {
// 基礎(chǔ)地址
Vue.prototype.BASE_URL = res.data.BASE_URL;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
})
}
- 使用
console.log(this.BASE_URL) //在.vue文件中
//在js文件中，先引入Vue
import Vue from 'vue'
console.log(Vue.prototype.BASE_URL)
- 有時無法獲取到baseUrl的bug
- 因為請求和打包操作的時差性，哪怕它是請求本地的文件，但是有時發(fā)現(xiàn)它的請求會比我們系統(tǒng)的第一個請求慢了，這個時候就會失效。
- 可以在攔截器里面將對應(yīng)的baseURL的值改成實時獲取Vue.prototype.BASE_URL的值，當然如果封裝了請求的方法，也可以在方法里面更改，以下是main.js里面的完整配置
import Vue from 'vue'
import axios from 'axios'
let startApp = function () {
axios.get('/config.json').then((res) => {
// 基礎(chǔ)地址
Vue.prototype.BASE_URL = res.data.BASE_URL;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
})
}
function getBseUrl(){
return Vue.prototype.BASE_URL
}
axios.interceptors.request.use(function (config) {
let token = window.localStorage.getItem('token');
config.baseURL = getBseUrl()
return config;
}, function (error) {
return Promise.reject(error);
});
startApp()
原文出處：https://www.cnblogs.com/webhmy/p/9517680.html
