打包上线不确定接口IP以及端口 如何处理

前言
本文主要讲述如何在vue项目打包后动态修改请求服务器接口的ip和端口的修改，其他的配置可参考此方法进行。

在Vue项目中一般都将配置文件写在 .env.development / .env.production 文件当中，但是如果仅仅是因为修改配置文件又重新打包一次就会很繁琐，浪费时间。

一、本文考虑使用外部js文件的方法去做到动态修改配置

废话不多说下面我们开始实操

二、使用步骤

1.在public下static文件夹(如果没有static自行创建一个static文件夹)下创建一个config.js文件

参考如下图片如下：

config.js内容如下：

let config = {
    serverIP: "http://127.0.0.1:9099/test/api/v1"
};

2.在public下index.html中引入config.js文件

参考如下图片如下：

代码如下：

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

3.在引用的地方使用config.js里的配置即可（以下没使用到的可以直接跳过哈）

封装的axios里使用

如下图所示：

vite.config.js里使用

由于本项目基于vite+vue3创建的项目，所以有vite.config.js,使用如下图所示在vite.config.js的代理proxy里配置引入config.js里的serverIP

如下图所示：

最后

打包项目最后生成的文件夹如下图所示，这时候你就可以修改config.js里的配置，项目里的配置就会随之更改了。也不需要在重新打包了。