如何在vue项目打包后依然愉快的修改接口地址

事件起因

有一次后端兄弟改了线上地址，逼得我重新修改了生产环境的接口地址再打了个包。领导看到了之后觉得操作特别复杂，就问我有没有一种可能，能把接口地址搞成个配置项，后端再改线上地址，就不用我再重新打前端的包，只需修改配置项即可。我的内心是绝望的，但是不敢问领导要啥自行车啊，就只好想想该咋办了🤢

正常的接口封装

req.js（axios的第一层封装）

let severUrl;

// 环境的切换
if (process.env.NODE_ENV == 'development') {
    
  //开发环境 
  severUrl = 'xxx'
} else if (process.env.NODE_ENV == 'debug') {

  //测试环境
  severUrl = 'xxx';
} else if (process.env.NODE_ENV == 'production') {

  //生产环境
  severUrl = 'xxx'
}
// 设置接口地址
axios.defaults.baseURL = severUrl;

一般的axios获取接口的方式，是通过nodejs去判断当前所在的环境，获取该环境匹配的的接口地址

思考

咋给留个配置项呢，在前面写个js文件，里面写一个配置对象，在这个文件里再引用进来？

引入太麻烦，不然直接挂载在window全局对象上？

在其他地方打包都会被乱码，配置在哪呢？

public文件夹里不会被打包啊

嚯！！！可以试试

操作

在public文件夹中加入config.js

config.js

window._config={
  //ajax接口配置
  axiosUrl:"http://192.168.30.10:8080/alarm_analysis",
}

在public文件夹中的index.html中引入config.js

更改req.js（axios的第一层封装）

let severUrl = window._config.axiosUrl;

// 设置接口地址
axios.defaults.baseURL = severUrl;

开发环境中亲测有效

再看看生产环境成功的原因

dist文件夹中的index.html

如图所示，config.js在body标签内是第一个被引用的script标签，根据js代码从上到下依次执行的原理，config.js对window全局对象的修改在后面引入的js文件中也有效，故该方法可用于打包后的接口修改

再也不用因为后端的线上地址更换，而频繁打包了，只需要修改打包后的config.js中的配置就行了，好耶！！！ヾ(✿ﾟ▽ﾟ)ノ