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

news2024/11/27 2:24:53

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2207098.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何将数据输入到神经网络中(How to Input Data into a Neural Network)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

k8s中pod管理

一、Pod的基本概念 定义&#xff1a;Pod是Kubernetes中可以创建和管理的最小单元&#xff0c;是资源对象模型中由用户创建或部署的最小资源对象模型。 组成&#xff1a;Pod由一个或多个容器组成&#xff0c;这些容器共享网络、存储等资源&#xff0c;并作为一个整体被调度和管…

PPT电脑怎么录屏?多达4种录屏软件录制 PPT 指南

在日常的工作、学习以及知识分享领域&#xff0c;PPT 扮演着不可或缺的角色。而将 PPT 内容录制下来更是有诸多用途&#xff0c;比如教师制作线上教学课件、职场人士分享项目方案、培训师准备培训素材等。要想获得优质的 PPT 录制效果&#xff0c;合适的录屏软件必不可少。接下…

5G路由器工业物联网PLC模块通讯应用

工业物联网在计算机互联网的基础上&#xff0c;利用传感技术、数据通信等技术&#xff0c;构建一个覆盖世界万物的“Internet of Things”&#xff0c;其实质是利用传感技术&#xff0c;通过联网实现物的自动识别和信息的互联与共享。5G工业路由器连接现场传感设备等实施数据采…

微知-NVIDIA Bluefield DPU的E-Series和P-Series区别?(功率75vs150,是否需要ATX额外供电)

背景 本文介绍了NVIDIA的Bluefield的产品分裂E和P系列&#xff0c;了解这部分&#xff0c;可以快速获取CPU主频&#xff0c;还能根据产品型号字母快速获取数据。 区别 E 系列 DPU&#xff1a;通过 PCIe x16 接口提供最大 75W 的系统电源。 P 系列 DPU&#xff1a;通过 PCIe …

植物大战僵尸杂交版

最新版植物大战僵尸杂交版 最近本款游戏火爆 下载资源如下&#xff1a; win版本&#xff1a;2.3.7 链接&#xff1a;下载地址 提取码&#xff1a;9N3P Mac&#xff08;苹果版本&#xff09;&#xff1a;2.0.0 链接&#xff1a;下载地址 提取码&#xff1a;Bjaa 介绍&#xff…

AVL树----java版

一.AVL树是什么 在前面的学习中我们已经学习了二叉搜素树&#xff0c;二叉搜素树主要用于查询。二叉搜素树的查询效率为o(n)&#xff0c;当树有序的时候二叉搜素树就变为一颗单分支的树&#xff0c;树的高度为n,所以最坏情况下时间复杂度为o(n)。 二叉搜索树虽可以缩短查找的效…

单臂路由实现vlan间互访

划分vlan 可以隔离广播域,但vlan 之间无法通信。既能隔离广播域,防止广播风暴的发生,又能实现vlan 之间的通信,就需要用到网络层的路由器,可以通过路由器,以单臂路由的方式来实现vlan 之间的通信。 以下是在神州交换机和路由器上实现单臂路由实现 VLAN 间互访的配置代码示…

牵手红娘:牵手App打造多元化标签策略,精准寻找“理想型”

如今&#xff0c;线上恋爱平台已经成为单身青年探索爱情的新大陆。在这个快节奏的时代&#xff0c;如何在线上恋爱平台准确、迅速地找到那个与自己心灵相契的另一半&#xff0c;成为了无数单身男女心中的迫切愿望。拥有共同的兴趣爱好、相似的三观&#xff0c;对当代年轻人来说…

实现页面下拉框数据从后台表格去重取值并且含有对应关系

当地区选择变化时&#xff0c;动态更新客户名称下拉框&#xff08;效果图如下&#xff09; 实现步骤&#xff0c;html部分 <form class"form-horizontal m-t"><div class"row"><div class"col-sm-6"><div class"form…

前端转换double数据,保留两位小数

Number Number(1.00) 1 Number(1.10) 1.1 Number(1.101) 1.101 要想前端展示页面按 1.00展示1&#xff0c;1.10 展示1.1 需要套一个number() 1.1 保留两位小数&#xff0c;并三位一个分隔符 indexView.value[key] formatNumber(indexView.value[key].toFixed(2))//格式…

Springboot 整合 Java DL4J 实现企业门禁人脸识别系统

&#x1f9d1; 博主简介&#xff1a;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编程&#xff0c;…

Linux系列-常见的指令(二)

&#x1f308;个人主页&#xff1a; 羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” mv 剪切文件&#xff0c;目录 重命名 比如说&#xff0c;我们在最开始创建一个新的文件hello.txt 然后我们将这个文件改一个名字&#xff0c;改成world.txt 所以&#xff0c;…

C++ 算法学习——1.8 快速幂算法

背景知识&#xff1a; 1.位运算 在C中&#xff0c;位运算是对整数类型的位进行操作的一种运算方式。常见的位运算符包括按位与&#xff08;&&#xff09;、按位或&#xff08;|&#xff09;、按位异或&#xff08;^&#xff09;、取反&#xff08;~&#xff09;、左移&am…

Unity MVC框架1-2 实战分析

该课程资源来源于唐老狮&#xff0c;吃水不忘打井人&#xff0c;不胜感激 Unity MVC框架演示 1-1 理论分析-CSDN博客 首先你需要知道什么mvc框架&#xff0c;并且对三个层级有个比较清晰的认识&#xff0c;当然不清楚也好&#xff0c;下面例子中将会十分细心地让你理解&#x…

“CFD+水务”,积鼎通用流体仿真软件VirtualFlow助力水处理能力提升

在快速发展的现代社会中&#xff0c;水务行业作为城市基础设施的重要组成部分&#xff0c;其高效、安全、可持续的运营直接关系到民众的生活质量与城市的健康发展。随着科技的进步&#xff0c;CFD技术正逐步渗透到水务行业的各个角落&#xff0c;以其独特的模拟预测能力&#x…

软件测试学习笔记丨质量门禁 - SonarQube

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/32486 一&#xff0c;质量门禁概念 质量门禁是为了控制达标率的检查任务设置质量门禁的好处 通过检查达标状态来评估产品质量&#xff0c;控制产品发布利用自动化任务来控制产品的代码质量&a…

构建高效互通的数字桥梁:香港服务器托管指南

在当今全球化日益加深的商业环境中&#xff0c;出海企业面临着前所未有的机遇与挑战。为了确保国内外业务的顺畅运行&#xff0c;特别是在实现国内外数据高效互通、低延迟访问方面&#xff0c;选择一家合适的香港服务器机房进行托管成为了许多企业的关键决策之一。香港&#xf…

科研绘图系列:R语言蝴蝶图(Butterfly Chart)

文章目录 介绍加载R包数据函数画图系统信息介绍 蝴蝶图(Butterfly Chart),也被称为龙卷风图(Tornado Chart)或双轴图(Dual-Axis Chart),是一种用于展示两组对比数据的图表。这种图表通过在中心轴两侧分别展示两组数据的条形图,形似蝴蝶的翅膀,因此得名。蝴蝶图的特点…

ORM 框架 查询相关函数

1、Ubuntu 实时查看 Mysql 数据库日志 sudo tail -f /var/log/mysql/mysql.log2、Django 的 ORM 3、查询相关函数 4、get filter exclude 方法可以增加条件 &#xff08;1&#xff09;条件格式&#xff1a; 模型类属性名__条件值值 &#xff08;2&#xff09;示例代码 # 在…