配置vue打包后可以更改接口地址

有时候我们会遇到这种情况，项目开发完打包后，安排其他同事需要去客户现场集成，我们在去之前也不知道客户的服务器地址，这时候就可以把接口地址配置成打包后也可以更改，这样会方便许多，下面是具体流程：

1. 创建config.js
我的vue-cli是3.X版本，所以没有static文件夹，只有public文件夹，而这个文件夹打包不会被编译，我们就在这个文件夹下创建自己的配置文件config.js

window.g = {
  BASE_URL: "http://127.0.0.1:8080/phm"
}

2. 引用config.js
在public文件夹下的index.html引用该配置文件

<script type="text/javascript" src="config.js"></script>

3. 使用config.js
可以在封装 axios 的代码中，设置 baseUrl 时，直接使用 config.js 中配置的值。代码如下：

var baseURLStr = window.g.BASE_URL; // 设置可配置接口地址
const instance = axios.create({
  timeout: 600 * 1000, //请求超时时间
  baseURL: baseURLStr,
});

总结：

这样配置后打包后的文件结构如下图所示：
我们想修改服务器地址的时候，只需用记事本修改config.js里面的值就行，这样也不会影响开发模式。
注：vue项目中配置的proxy只是对于开发环境中将的localhost请求代理到www.xxx.com，当项目发布到生产环境则是走nginx代理服务器，项目中的proxy配置无效。