打包后更改baseUrl

背景

• 部署后如果更改了baseURL，每次更改都要重新打包一次过于麻烦
• 通过以下配置，可以在yarn build生成的文件夹下面的config.json直接修改，不需要每次重新打包

解决步骤

1. 在 static 文件夹中新建一个 config.json，把你要写的配置写入（若是vuecli3以上版本，没有static文件，则放在public下面）

{
    "BASE_URL": "http://192.168.99.132:8080/topcheer"
}

2. 在 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')
  })
}

3. 使用

console.log(this.BASE_URL)   //在.vue文件中
//在js文件中，先引入Vue
import Vue from 'vue'
console.log(Vue.prototype.BASE_URL)

4. 有时无法获取到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