欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 文化 > 打包上线不确定接口IP以及端口 如何处理

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

2024/10/23 23:22:41 来源:https://blog.csdn.net/m0_52872381/article/details/142848700  浏览:    关键词:打包上线不确定接口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里的配置,项目里的配置就会随之更改了。也不需要在重新打包了。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com