Vue项目打包后可修改基础接口地址配置的具体操作

{
  "BASE_URL_DEV": "https://www.dev-api.com",
  "BASE_URL_PROD": "Https://www.prod-api.com"
}

import axios from 'axios'
import { getUrlParams } from './utils/index'  // 工具函数：获取 URL 上的参数
 
Vue.prototype.$axios = axios
 
function getServerConfig() {  // 定义
  axios.get('./config.json').then(res => {  // 请求上面描述的本地配置文件
    const urlDev = getUrlParams('env')  // 当 URL 上存在 env=prod 时请求地址为生产环境的
    Vue.prototype.BASE_URL = urlDev == 'prod' ? res.data.BASE_URL_PROD : res.data.BASE_URL_DEV 
    console.log('接口配置的基础地址', Vue.prototype.BASE_URL)
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    })
  })
}
 
getServerConfig()  // 执行
 

// 获取 URL 上的参数
export function getUrlParams(name) {
  if (name == null || name === 'undefined') { 
    return null
  }
  var searchStr = decodeURIComponent(window.location.href).replace('?', '&')
  var infoIndex = searchStr.indexOf(name + '=')
  if (infoIndex === -1) { 
    return null
  }
  var searchInfo = searchStr.substring(infoIndex + name.length + 1)
  var tagIndex = searchInfo.indexOf('&')
  if (tagIndex !== -1) { 
    searchInfo = searchInfo.substring(0, tagIndex)
  }
  return searchInfo
}

import Vue from 'vue'
import axios from 'axios'
 
function getBaseUrl(){
  return Vue.prototype.BASE_URL
}
 
const service = axios.create({
  baseURL: getBaseUrl(),  // 打包后可配置的方式
  withCredentials: true,
  timeout: 50000 // request timeout
})
 
//  ... 其余剩下部分与本文无关，就没有写出了 ...