React、Vue项目build打包编译后如何再修改后台请求地址

news2025/2/22 2:38:52

vue项目大家都了解,开发用 npm run dev/npm run serve。而要上线则必须是先将项目打包编译 npm run build 之后成为了普通的静态网页才可上线进行部署及发布。同样这时候我们也已经将代码全部写好了。如果说要改里面的某个值或者修改请求地址我们应该怎么办呢?

其实这个问题,我们也可以将它改成,vue/react项目打包编译后如何再修改其配置
在这里插入图片描述
打包之后的项目目录如上是一个静态网页。

当我们如果想直接修改js的某个变量的话,打开js 我们会发现项目已经被编译为普通的js,我们甚至连文件都找不到。
在这里插入图片描述
而里面的内容也被webpack编译为其它字符,找不到我们所要改的那个变量。
在这里插入图片描述
这时候怎么办呢?其实聪明的伙伴估计已经想到了。那就是让内容直接去读取第三方存储

例如:localStoragecookies或者某个json文件等。

也就是说,不管我们编译不编译,我们都让代码去读取第三方存储,获取我们的配置。这点我们其实经常碰到。就比如项目的某个配置文件。

那么怎么做呢?

我们需要新建一个文件,放置在项目的public文件夹中,因为vue项目打包编译的时候,默认这个文件是不会被编译的。(如果你们有单独设置了webpack的编译则另说)

类似于我在当前页面创建一个文件叫:config.js文件
在这里插入图片描述
这个文件中,我们声明导出一个接口地址,并将它挂载在window之上。(你想要编辑的地址)
在这里插入图片描述
下来我们需要在全局的index.html 中引入这个js文件。

众所周知,public下的index.html就是当前vue项目的主html文件。所以我们的目标就是在项目每次打开的时候去运行这个js,将接口写入window之上。
在这里插入图片描述

这样的话,我们在每次打开这个项目的时候,都会去先执行config.js这个文件,读取文件配置然后挂载在window属性值上。

剩下的就是简单了。

在全局配置請求地址的地方引入window.myURL.URL 即可。
(使用TS:使用window['myURL']方式,不然提示无myURL)

在这里插入图片描述
这样,我们就完成了项目的配置。

然后使用 npm run build 进行编译打包后上线部署。这时候我们打开项目在控制台上获取下window看看配置文件地址是否生效

在这里插入图片描述
结果是生效的。

以上就是我们项目打包后如何再次修改请求接口的方法。

同时借用这个方法,我们也可以做项目配置。例如:控制文件上传大小,等操作。都是类似的操作

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

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

相关文章

IDEA中创建编写JSP

一、安装Tmocat并配置环境 安装请参考:https://www.cnblogs.com/weixinyu98/p/9822048.html 安装请参考:https://www.cnblogs.com/zhanlifeng/p/14917777.html 注意:在安装成功Tomcat测试是否成功安装时,访问“http://localhost:8…

selenium自动化教程及使用java来爬取数据

目录 一、介绍二、下载浏览器驱动1.获取要下载的驱动版本号2.下载驱动 三、Maven如下四、简单使用五、定位器1.定位器2.说明(1) class name 定位器(2) css selector 定位器(3) id 定位器(4) name 定位器(5) link text 定位器(6) partial link text 定位器(7) tag 定位器(8) xpa…

Android 内存检测LeakCanary

在github上下载了一个项目:安装debug版本会产生两个apk,一个是apk本身,一个是Leaks release版本就正常 不会产生这个问题,百思不得其解,第一次遇到这个问题。 看到这篇博客豁然开朗:在build.gradle.kts 里…

3天爆肝整理,性能测试问题汇总+解决办法(重要)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 开始性能测试前需…

入门孪生网络3-------使用一维卷积神经网络1DCNN与孪生网络的组合模型来实现excel数据的分类

文章目录 前言入门孪生网络的第三小节,我尝试使用keras或tensorflow2框架来搭建一个数据分类的网络。大家可以参考的程序思路,我也是小白,可以评论区一起讨论。 一、孪生网络与1DCNN组合网络的搭建思路二、我编写的孪生网络与1DCNN组合网络程…

操作教程:EasyCVR视频融合平台如何配置平台级联?

EasyCVR视频融合平台基于云边端一体化架构,可支持多协议、多类型设备接入,在视频能力上,平台可实现视频直播、录像、回放、检索、云存储、告警上报、语音对讲、电子地图、集群、智能分析以及平台级联等。平台可拓展性强、开放度高、部署轻快&…

干货讲解,财务报表结构分析

财务报表的构成是对企业财务状况、经营成果和现金流量的结构性表述。企业必须重视财务结构对经营业绩的影响,才能解决发展中的问题。 资产质量关注两个角度,一是资产结构,二是现金含量。 资产结构是什么意思呢?就是固定资产和无…

Linux 定时任务提权

Linux 定时任务提权 1.概述2.定时任务创建3.提权步骤 1.概述 定时任务(cron job)是Linux系统中的一个守护进程,用于调度重复任务,通过配置crontab可以让系统周期性地执行某些命令或者脚本。cron 是 Linux 系统中最为实用的工具之…

apple pencil二代平替笔哪个好用?苹果平板触控笔

随着互联网的快速发展,移动数码产品如手机、平板电脑、笔记本等正逐步进入人们的日常生活。同时电容笔的出现,也让这些产品的功能作用更上一层楼。由于苹果原装电容笔的价格非常贵,使得国内出现了越来越多的平替电容笔。总的来说,…

前端开发:基于cypress的自动化实践

如何在vue中使用cypress如何运行cypress如何编写测试用例如何解决测试数据的问题遇到的元素定位的问题如何看待cypresscypress是否为最佳工具测试怎么办? 如何在vue中使用cypress vue提供了vue-cli 可以快速的创建vue项目。 vue create hello-world在选择安装项里…

【亲测】集群环境中MMDetection3.0环境配置

本文记录下在集群环境下使用MMDetection的内容。 环境简介:所用集群设备为本地集群,具有管理节点和计算节点,且管理和计算在不同的主机上,作为用户,没有超级管理员权限。 MMdetection源码下载点击进入 这里主要记录下环…

二叉树题目:二叉树的中序遍历

文章目录 题目标题和出处难度题目描述要求示例数据范围进阶 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 解法三思路和算法代码复杂度分析 题目 标题和出处 标题:二叉树的中序遍历 出处:94. 二叉树的中序遍历 难度 3 级 题目描…

Windows Terminal添加至鼠标右键

Windows Terminal添加至鼠标右键 安装 在Microsoft Store中即可下载。 配置 在鼠标右键打开 下载Terminal图标 图标地址:https://raw.githubusercontent.com/microsoft/terminal/master/res/terminal.ico 下载后保存在某个文件夹path 添加到鼠标右键 批处理修改注册表 …

Linux常见指令(超详解哦)

Linux常见指令 引言Linux常见指令查指令——man文件管理相关指令lspwdcdtouchmkdirrmdir与rmrmdirrm cpmvfind 文件查看类catmorelesshead 与 tailheadtail使用管道显示某段内容 grep 打包压缩相关指令zip/unziptar 总结 引言 Linux与我们熟悉的Window都是操作系统&#xff0c…

spring-aop入门

spring-aop入门 什么是AOP OOP(Object-Oriented Programming)面向对象编程,允许开发者定义纵向的关系,但并适用于定义横向的关系,导致了大量代码的重复,而不利于各个模块的重用。 AOP(Aspect-Oriented Programming),…

优思学院|质量管理六大思维陷阱【五】:有了控制图就能改进质量?

1. 引言 在工厂的生产过程中,质量控制是至关重要的。控制图是一种常见的质量管理工具,它可以帮助工厂监测过程的稳定性和质量表现,同时它也是六西格玛最重要的工具之一。然而,人们对于控制图的理解并不总是正确,有时被…

【中危】Kubernetes secrets-store-csi-driver 信息泄露漏洞

漏洞描述: Kubernetes secrets-store-csi-driver 是一个用于 Kubernetes 的 CSI 驱动程序,它提供了一种将外部密钥存储系统中的凭据注入到 Kubernetes Pod 的机制。 在 secrets-store-csi-driver 受影响版本中,当在 CSIDriver 对象中配置了…

操作系统期末复习简记(更新中~)

文件 定义:文件是以计算机硬盘为载体的存储在计算机上的信息集合(宽泛的) 属性:描述文件状态的信息,eg.名称,修改时间等等 基本操作:创建、打开、修改文件 文件的逻辑结构 1、无结构文件&#x…

【SpringMVC】统一异常处理 前后台协议联调 拦截器(文末赠书)

1,统一异常处理 1. 问题描述 在讲解这一部分知识点之前,我们先来演示个效果,修改BookController类的getById方法 GetMapping("/{id}") public Result getById(PathVariable Integer id) {//手动添加一个错误信息if(id1){int i …

JS BOM和DOM对象的尺寸

A scroll…..系列 scrollHeight: 获取对象的滚动高度。 scrollWidth:获取对象的滚动宽度 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 内容距左边框的距离(不算padding与border) scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最…