背景
- 部署后如果更改了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()放在请求里执行，是防止请求与页面渲染之间的时间差异化导致值获取不到，因此这样比较保险。
- 如果config.json是放在public文件夹则请求路径直接是'/config.json'，因为 / 直接指向项目下的public文件夹
// 定义外部接口可配置
import axios from 'axios'
let startApp = function () {
//如果是public文件夹则路径直接是'/config.json'，因为/直接指向项目下的public文件夹
axios.get('/config.json').then((res) => {
// 基础地址
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
- 因为请求和打包操作的时差性，哪怕它是请求本地的文件，但是有时发现它的请求会比我们系统的第一个请求慢了，这个时候就会失效。
- 可以在拦截器里面将对应的baseURL的值改成实时获取Vue.prototype.BASE_URL的值，当然如果封装了请求的方法，也可以在方法里面更改，以下是main.js里面的完整配置
import Vue from 'vue'
import axios from 'axios'
let startApp = function () {
axios.get('/config.json').then((res) => {
// 基础地址
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
