【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口

记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨

问题

我们在vue项目中打包的时候，webpack会将我们的组件，html，js，css，jpg等其他文件进行打包，其中请求的ip和端口也是在开发过程中写好的，直接打包生成了相应的js，如果此时我们想要修改请求的IP和端口，需要修改打包后的文件，不好查找，并且也容易出错。

期望效果

打包之后，可以通过修改某个配置文件，进行ip和端口的配置

代码实现

1、public文件夹下创建config.js,将apiURL添加到window对象中（线上环境）。内容如下

window.api = {
  apiURL: 'http://192.168.102.23:8088'
}

2、在public/index.html中引入,保证在线上环境中，会加载config.js，

<script src="./config.js"></script>

3、修改axios配置，修改baseURL，如果是测试环境，则使用我们本地的服务器接口，如果是线上环境，使用config.js中的apiURL。

// create创建axios实例
const request = axios.create({
    timeout: 10000,
    baseURL: process.env.NODE_ENV === 'production' ? window.api.apiURL : 'http://172.16.13.57:8088',
})

4、打包

npm run build

5、测试
修改dist/config.js中的apiURL，刷新页面，会发现，已经实现了我们想要的效果，赞！