前言
本文主要讲述如何在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里的配置,项目里的配置就会随之更改了。也不需要在重新打包了。