Vue2动态代理无须重启项目解决方案

1、痛点

如果我们需要使用不同的环境地址的时候,就需要使用命令或者手动修改vue.config.js中配置来重新启动项目。当项目项目越来越大的时候,我们需要很长的时间来启动项目,如此反复,极大影响我们开发进度。

2、寻求解决方案

在这里插入图片描述

● vue-cli 的代理是使用的http-proxy-middleware包,所以proxy选项的配置也是基于这个包的配置。在proxy配置选项中有两个属性target以及router。其中target是默认的代理地址。而router可以return一个字符串服务地址,那么当两个选项都配置了时,http-proxy-middleware在解析配置时,会首先使用router函数的返回值,当router的返回值不可以用时,那么就会fallback至target。
● 项目在每次发起http请求时都会调用router中的函数,对我们的环境地址文件进行实时读取,从而指向我们最新修改的环境地址。

3、解决方案

● 在vue.config.js文件中添加如下代码

const hotServer = () => {const path = './server-config.js';// require请求文件信息时,node会解析出我们传入的字符串的文件路径的绝对路径,并且以绝对路径为键值,对该文件进行缓存// 以绝对路径为键值删除require中的对应文件的缓存delete require.cache[require.resolve(path)];// 重新获取文件内容const { serverOrigin } = require(path);return serverOrigin || '';
};

● 修改proxy

proxy: {'/audit-apiv2': {secure: false,target: 'that must have a empty placeholder', // 这里必须要有字符串来进行占位// 项目在每次发起http请求时都会调用router中的函数router: () => hotServer(),onProxyReq(proxyReq) {// 绕过后端的csrf验证proxyReq.setHeader('referer', hotServer());}}
},

● 项目根目录下新建server-config.js文件

module.exports = {serverOrigin: 'https://192.168.21.79'
};
  • 往后便只需在一次执行npm run serve,在配置文件中修改服务器IP后刷新页面即是最新的环境

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

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

相关文章

RAG和agent框架选型

langChain llama index autoGen metaGPT

spring使用@PostConstruct踩得坑

情况说明: 在一个抽象类中使用PostConstruct注解方法init用于初始化操作。然后每个实现类在初始化时都会调用PostConstruct注解的init方法执行初始化操作。如下代码: public abstract class AbstractClass {/*** 存放各实例.*/public static final Map&…

git分支及提交规范【AI 文心一言】

Git代码提交规范和分支命名规范是团队协作中非常重要的部分,它们有助于保持代码库的清晰、一致和易于管理。以下是对Git代码提交规范和采用“/”分割的分支命名规范的总结: Git代码提交规范 提交类型: feat: 增加新功能 fix: 修复问题BUG d…

Windows安装多个jdk环境(jdk6+jdk8+jdk17)保姆级

Windows安装多个jdk环境(jdk6jdk8jdk17)保姆级 背景:新机安装开发环境发现需要找很多文章,,,,这里一篇文章安装所有环境 文章目录 Windows安装多个jdk环境(jdk6jdk8jdk17&#xff09…

经典游戏案例:植物大战僵尸

学习目标:植物大战僵尸核心玩法实现 游戏画面 项目结构目录 部分核心代码 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.SceneManagement; using Random UnityEngine.Random;public enum Z…

Django 条件判断模板标签

1&#xff0c;条件判断模板标签 1. 2 {% if %} 标签 {% if variable %}<!-- 如果 variable 为 True&#xff0c;则渲染此处内容 --> {% endif %} 1. 3 {% if %} 与 {% else %} 组合 {% if variable %}<!-- 如果 variable 为 True&#xff0c;则渲染此处内容 -->…

【笔记】git源

报错信息 # git clone https://github.com/paddlepaddle/PaddleCustomDevice Cloning into PaddleCustomDevice... error: RPC failed; curl 16 Error in the HTTP2 framing layer fatal: expected flush after ref listing可选源 由于&#x1f512;&#x1f5fa;&#xff0c…

BFS:解决最短路问题

文章目录 什么是最短路问题&#xff1f;1.迷宫中离入口最近的出口2.最小基因变化3.单词接龙4.为高尔夫比赛砍树总结 什么是最短路问题&#xff1f; 最短路问题是图论中的经典问题&#xff0c;旨在寻找图中两个节点之间的最短路径。常见的最短路算法有多种&#xff0c;这次我们…

【python包安装】手动安装libmr

遇到问题 再导入libmr模块时&#xff0c;导入失败 尝试使用pip install libmr安装&#xff0c;安装失败 查询原因是windows上pip安装找不到库&#xff0c;只能采取手动安装。 解决方法 下载libMR库文件 安装方法可以查看README文档 安装libmr之前需要安装Microsoft C14或…

开启数字新纪元:全球首款开源AI女友,你的私人数字伴侣

在这个数字化飞速发展的时代,人工智能已经不再是科幻小说中的幻想,而是实实在在走进了我们的生活。今天,我们要介绍的,不仅仅是一项技术革新,更是一场关于陪伴的革命——全球首款开源AI女友,DUIX,已经横空出世! 🚀 革命性的开源平台 DUIX,由硅基智能精心打造,不…

高中数学:数列-等差数列、等比数列的和与通项公式的关系

一、等差数列 1、通项公式与求和公式 2、性质 性质1 求和公式比上n&#xff0c;依然是一个等差数列。 性质2 等差数列中&#xff0c;每相邻m项和&#xff0c;构成的数列&#xff0c;依然是等差数列&#xff0c;公差&#xff1a;m2d 二、等比数列 1、通项公式与求和公式 a…

INVS利用gatearray实现post-mask的function ECO

随着现代IC的设计发展&#xff0c;设计的规模和复杂度逐步增加&#xff0c;对于验证完备性的挑战越来越大&#xff0c;加之TO的时间压力&#xff0c;芯片设计通常会出现下列的场景&#xff1a; 芯片回片一次点亮大部分的case都可以顺利通过小部分的功能需要修正 对于重要的特…

基于CentOS Stream 9平台 安装/卸载 Redis7.0.15

已更正systemctl管理Redis服务问题 1. 官方下载地址 https://redis.io/downloads/#redis-downloads 1.1 下载或上传到/opt/coisini目录下&#xff1a; mkdir /opt/coisini cd /opt/coisini wget https://download.redis.io/releases/redis-7.0.15.tar.gz2. 解压 tar -zxvf re…

.NET C# 装箱与拆箱

.NET C# 装箱与拆箱 目录 .NET C# 装箱与拆箱1 装箱 (Boxing)1.1 过程&#xff1a;1.2 示例&#xff1a; 2 拆箱 (Unboxing)2.1 过程&#xff1a;2.2 示例&#xff1a; 3 性能影响4 性能优化4.1 使用泛型集合示例&#xff1a; 4.2 使用Nullable<T>示例&#xff1a; 4.3 避…

速通数学建模 —— 查找数据

目录 百度搜索技巧 完全匹配搜索&#xff1a;查询词的外边加上双引号“ ” 标题必含关键词&#xff1a;查询词前加上intitle: 搜索文档&#xff1a;空格再输入filetype:文件格式 去掉不想要的&#xff1a;查询词后面加空格后加减号与关键字 知网查文献 先看知网的硕博士…

[AIGC] 深度优先搜索(DFS)详解及其在LeetCode问题中的应用

深度优先搜索&#xff08;Depth-First-Search&#xff0c;简称DFS&#xff09;是一种用于遍历或搜索树或图的算法&#xff0c;其思想是从一个顶点 V0 开始&#xff0c;沿着一条路一直走到底&#xff0c;如果发现不能到达目标解&#xff0c;就退回到上一步的状态&#xff0c;转向…

经典游戏案例:愤怒的小鸟

学习目标&#xff1a;愤怒的小鸟核心玩法 游戏画面 项目结构目录 部分核心代码 using System.Collections; using System.Collections.Generic; using birds; using utils; using UnityEngine;public class GameManager : MonoBehaviour {public static GameManager sInstanc…

【C++】优先队列的使用及模拟实现

&#x1f497;个人主页&#x1f497; ⭐个人专栏——C学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 目录 导读 一、什么是优先队列 二、优先队列的使用 1. 优先队列的构造 2. 优先队列的基本操作 3. 使用示例 三、优先队列模拟实…

【硬件开发】共模电感

为什么电源无论直流还是交流的输入端都需要一个共模电感 图中L1就是共模电感&#xff0c;长下面这个样子&#xff0c;两侧的匝数&#xff0c;线径和材料都是一模一样的 共模电感的作用是为了抑制共模信号 抑制共模信号工作原理 http://【共模电感是如何抑制共模信号的】https…

【免费】中国电子学会2024年03月份青少年软件编程Python等级考试试卷一级真题(含答案)

2024-03 Python一级真题 分数&#xff1a;100 题数&#xff1a;37 测试时长&#xff1a;60min 一、单选题(共25题&#xff0c;共50分) 1. 下列哪个命令&#xff0c;可以将2024转换成2024 呢&#xff1f;&#xff08; A&#xff09;(2分) A.str(2024) B.int(2024) C.fl…