效能工具:执行 npm start 可直接切换proxy代理UR后直接启动项目
1) 背景:
我们项目是2个前端3个后端的配置。前端和每个后端都有需要调试的接口。
因此经常切换vite.congig.js中的proxy后端代理链接,是挺麻烦的。
于是我研究如何能快速切换后端URL,所幸懒人有懒福,我找到了Inquirer 和 fs,
实现执行 npm start 可直接切换vite.config.js中proxy的代理URL,然后直接启动项目。
2) inquirer 和 fs npm包
先来说说Inquirer ,Inquirer是一个流行的 Node.js 库,用于构建交互式命令行界面。
fs是用于读取,写入,修改文件的工具。
简单介绍一下他的用法。
目前项目背景:vue: ^3.4.29 inquirer: ^10.0.1
// 需要定义,命令行可选范围
// name是展示在命令行
// value是选中name后可获得相对的value
const targetList = [{name: '张三',value: "\t\t\t\ttarget: 'http://33.33.33.33:3333',",},{name: '李四',value: "\t\t\t\ttarget: 'http://44.44.44.44:4444',",},{name: '王二',value: "\t\t\t\ttarget: 'http://22.22.22.22:2222',",},{name: '麻子',value: "\t\t\t\ttarget: 'http://55.55.55.55:5555',",},
]
// 调用inquirer方法,进行基础配置
const choose = inquirer.prompt([{type: 'list', // 用于提供一个列表选择。用户可以从列表中选择一个选项作为答案。name: 'serve', // 自取名message: '请选择开发环境下需要连接的后端服务', // 展示给用户的标题行choices: targetList, // 选取的列表值default: targetList[0].value // 进入命令行,默认选项}
])
3) 思路
- 首先使用fs模块读取vite.config.js文件,找到target内容
- 将我们在命令行选中的值 替换掉 刚刚找到target内容
- 将替换成功的内容,重新写入vite.config.js文件
- 在package.json 中npm start 修改命令
4) 完整代码如下:
// nodeTab.js
// Vue2中引入fs模块使用require,Vue3使用import
import fs from 'fs';
// inquirer这个库来创建交互式的命令行界面
import inquirer from 'inquirer';// 需要定义,命令行可选范围
// name是展示在命令函
// value用来替换proxy中代码
const targetList = [{name: '张三',value: "\t\t\t\ttarget: 'http://33.33.33.33:3333',",},{name: '李四',value: "\t\t\t\ttarget: 'http://44.44.44.44:4444',",},{name: '王二',value: "\t\t\t\ttarget: 'http://22.22.22.22:2222',",},{name: '麻子',value: "\t\t\t\ttarget: 'http://55.55.55.55:5555',",},
]
// 去找到target这一行代码
function findTarget(file) {let arr = file.split('\n')let targetStr = ''for (let i = 0; i < arr.length; i++) { // 通过循环找到对应行if (arr[i].includes('target:')) {targetStr = arr[i] // 赋值一下,找到了break}}return targetStr
}
// 选择方法
async function selectServe() {try {// 在命令行进行选择const choose = await inquirer.prompt([{type: 'list',name: 'serve',message: '请选择开发环境下需要连接的后端服务',choices: targetList,default: targetList[0].value}])// 读取了文件vite.config.js为string格式let file = fs.readFileSync('./vite.config.js', 'utf-8')// 找到target这一行let proxyTarget = findTarget(file)// 替换我们新选的后端服务地址const newFile = file.replace(proxyTarget, choose.serve)// 重新写入vite.config.jsfs.writeFileSync('./vite.config.js', newFile)} catch (error) {throw error}
}
selectServe()
// package.json
// 这里就展示部分代码,在start启动项目前,先执行node program/nodeTab.js这个脚本"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "vite --mode development","build": "vite build --mode production","builds": "node program/ssh.js && vite build --mode production","start": "node program/nodeTab.js && vite --mode production","build:env": "vite build --mode development"},
如有不足,欢迎指正。
不要忽视你达成的每个小目标,它是你前进路上的垫脚石。冲!
相关文章:

效能工具:执行 npm start 可直接切换proxy代理UR后直接启动项目
1) 背景: 我们项目是2个前端3个后端的配置。前端和每个后端都有需要调试的接口。 因此经常切换vite.congig.js中的proxy后端代理链接,是挺麻烦的。 于是我研究如何能快速切换后端URL,所幸懒人有懒福,我找到了Inquirer 和 fs, 实…...

MongoDB自学笔记(一)
一、MongoDB简介 MongoDB是一款基于C开发的文档型数据库。与传统的关系型数据库有所不同,MongoDB面向的是文档,所谓的文档是一种名为BSON (Binary JSON:二进制JSON格式)是非关系数据库当中功能最丰富,最像…...

【AIGC】二、mac本地采用GPU启动keras运算
mac本地采用GPU启动keras运算 一、问题背景二、技术背景三、实验验证本机配置安装PlaidML安装plaidml-keras配置默认显卡 运行采用 CPU运算的代码step1 先导入keras包,导入数据cifar10,这里可能涉及外网下载,有问题可以参考[keras使用基础问题…...
【Qt】使用临时对象的坑
前言 使用临时对象时,一定要注意临时对象析构后是否会对代码造成影响,下面是一些可能出现的错误 std::string Widget::getStr() {return "nihao"; }void Widget::on_pushButton_clicked() {std::string objStr getStr();const char* str g…...

Apache-Flink未授权访问高危漏洞修复
漏洞等级 高危漏洞!!! 一、漏洞描述 攻击者没有获取到登录权限或未授权的情况下,或者不需要输入密码,即可通过直接输入网站控制台主页面地址,或者不允许查看的链接便可进行访问,同时进行操作。 二、修复建议 根据业务/系统具体情况,结合如下建议做出具体选择: 配…...

Unable to obtain driver using Selenium Manager: Selenium Manager failed解决方案
大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

(01)Unity使用在线AI大模型(使用百度千帆服务)
目录 一、概要 二、环境说明 三、申请百度千帆Key 四、使用千帆大模型 四、给大模型套壳 一、概要 在Unity中使用在线大模型分为两篇发布,此篇文档为在Python中使用千帆大模型,整体实现逻辑是:在Python中接入大模型—>发布为可传参的…...

Zed 编辑器发布了原生 Linux 版本
由 Rust 编写、GPU 加速的 Zed 文本编辑器终于提供了正式的 Linux 原生版本!在过去的几个月里,Zed 的 Linux 支持取得了长足的进步,现在已经进入了更正式的阶段。 今天,这款由前 Atom 开发人员创建的现代开源代码编辑器现在在 Li…...

安全入门day01
一、常用名词 1、前后端 (1)前端 前端主要负责用户界面的展示和交互。它通常包括HTML、CSS和JavaScript等技术的使用,也可能使用各种前端框架和库,如React、Vue.js、Angular等,来构建更加复杂和动态的用户界面。前端…...

基于Adaboost的数据分类算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于Adaboost的数据分类算法matlab仿真,分别对比线性分类和非线性分类两种方式。 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 (完整程序…...

基于Java的斗地主游戏案例开发(做牌、洗牌、发牌、看牌
package Game;import java.util.ArrayList; import java.util.Collections;public class PokerGame01 {//牌盒//♥3 ♣3static ArrayList<String> list new ArrayList<>();//静态代码块//特点:随着类的加载而在加载的,而且只执行一次。stat…...

Ubuntu 22.04.4 LTS (linux) 安装certbot 免费ssl证书申请 letsencrypt
1 安装certbot sudo apt update sudo apt-get install certbot 2 申请letsencrypt证书 sudo certbot certonly --webroot -w 网站目录 -d daloradius.域名.com 3 修改nginx 配置ssl 证书 # 配置服务器证书 ssl_certificate /etc/letsencrypt/live/daloradius.域名.com/f…...

MT6825磁编码IC在智能双旋机器人中的应用
MT6825磁编码IC在智能双旋机器人中的应用,无疑为这一领域的创新和发展注入了新的活力。作为一款高性能的磁性位置传感器,MT6825以其独特的优势,在智能双旋机器人的运动控制、定位精度以及系统稳定性等方面发挥了关键作用。 www.abitions.com …...

Datawhale 2024 年 AI 夏令营第二期——基于术语词典干预的机器翻译挑战赛
#AI夏令营 #Datawhale #夏令营 1.赛事简介 目前神经机器翻译技术已经取得了很大的突破,但在特定领域或行业中,由于机器翻译难以保证术语的一致性,导致翻译效果还不够理想。对于术语名词、人名地名等机器翻译不准确的结果,可以通…...

Qt 多窗体、复用窗口的使用
1.继承自QWidge的窗口的呈现,作为tabPage呈现,作为独立窗口呈现 2.继承自QMainWindow的窗口的呈现,作为abPage呈现,作为独立窗口呈现 1. 继承自QWidge的窗口的呈现 1.1 作为tabPage呈现 void MutiWindowExample::on_actWidgetI…...
python 基础语法整理
注释声明命名规范数据类型简单数据类型复合数据类型 打印输出类型转换随机数获取布尔类型流程控制语句循环语句字符串操作拼接替换分割与连接大小写转换空白字符删除 切片列表操作访问/赋值判断是否存在元素添加/删除复制排序 元组集合字典空集合与空字典 函数声明多返回值函数…...

【Linux】常见指令(下)
【Linux】常见指令(下) 通配符 *man指令cp指令echo指令cat指令(简单介绍)cp指令 mv指令alias指令which ctrl ccat指令linux下一切皆文件 more指令less指令head指令tail指令管道 通配符 ‘*’ 通配符’ *‘,是可以匹配…...

jvm常用密令、jvm性能优化、jvm性能检测、Java jstat密令使用、Java自带工具、Java jmap使用
1.jps是Java虚拟机的进程状态工具,用于列出正在运行的Java进程 jps命令的使用:cmd打开直接jps 1.1不带参数: jps 默认情况下,列出所有正在运行的 Java 进程的进程 ID 和主类名。 1.2 -l:显示完整的主类名或 JAR 文件…...

实验三:图像的平滑滤波
目录 一、实验目的 二、实验原理 1. 空域平滑滤波 2. 椒盐噪声的处理 三、实验内容 四、源程序和结果 (1) 主程序(matlab) (2) 函数GrayscaleFilter (3) 函数MeanKernel (4) 函数MedFilter 五、结果分析 1. 空域平滑滤波 2. 椒盐噪声的处理…...

VUE前端HTML静默打印(不弹出打印对话框)PDF简单方案
前言 在做打印功能的时候,以前大部分客户端都是用C#做的,静默打印(也就是不弹出打印对话框)比较简单。 但是使用浏览器作为客户端,静默打印(也就是不弹出打印对话框)做起来就比较困难。困难的…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天,数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具,在大规模数据获取中发挥着关键作用。然而,传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时,常出现数据质…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...