背景
- 部署后如果更改了baseURL丢烘，每次更改都要重新打包一次過(guò)于麻煩
- 通過(guò)以下配置趣些，可以在yarn build生成的文件夾下面的config.json直接修改，不需要每次重新打包
解決步驟
- 在 static 文件夾中新建一個(gè) config.json妻怎，把你要寫(xiě)的配置寫(xiě)入（若是vuecli3以上版本刁赖，沒(méi)有static文件搁痛，則放在public下面）
{
"BASE_URL": "http://192.168.99.132:8080/topcheer"
}
- 在 main.js 中請(qǐng)求定義的配置文件，并放到 Vue.prototype 中宇弛，使全局可訪問(wèn)
- 注意鸡典，這里把new Vue()放在請(qǐng)求里執(zhí)行，是防止請(qǐng)求與頁(yè)面渲染之間的時(shí)間差異化導(dǎo)致值獲取不到枪芒，因此這樣比較保險(xiǎn)彻况。
- 如果config.json是放在public文件夾則請(qǐng)求路徑直接是'/config.json'谁尸，因?yàn)?/ 直接指向項(xiàng)目下的public文件夾
// 定義外部接口可配置
import axios from 'axios'
let startApp = function () {
//如果是public文件夾則路徑直接是'/config.json'，因?yàn)?直接指向項(xiàng)目下的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)
- 有時(shí)無(wú)法獲取到baseUrl的bug
- 因?yàn)檎?qǐng)求和打包操作的時(shí)差性良蛮，哪怕它是請(qǐng)求本地的文件，但是有時(shí)發(fā)現(xiàn)它的請(qǐng)求會(huì)比我們系統(tǒng)的第一個(gè)請(qǐng)求慢了悍赢，這個(gè)時(shí)候就會(huì)失效决瞳。
- 可以在攔截器里面將對(duì)應(yīng)的baseURL的值改成實(shí)時(shí)獲取Vue.prototype.BASE_URL的值，當(dāng)然如果封裝了請(qǐng)求的方法左权，也可以在方法里面更改皮胡，以下是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
