当前位置： 首页 > news >正文

前端工程注入版本号

news 文章来源：https://blog.csdn.net/u012804440/article/details/135176871 2024/9/21 2:34:59

文章目录

  • 一、前言
  • 二、`webpack`
  • 三、`vite`
  • 四、最后

一、前言

容器化时代，当页面出现问题时，如果你的新版本有可能已经修复了，那样你再排查它就没有意义了。为什么不一定是最新版本呢？一是可能是缓存作祟，二是可能运维成员由于某种原因回退了版本。

怎么确认问题发生在哪个版本呢？这就需要我们往页面注入版本号。

通常这一步，是在打包构建时，将package.json中的version字段注入到html上（所以要求每次发布版本，都修改对应的version，最好使用npm version命令操作）。我比较推荐在head中添加一个meta，当然你也可以将它打印出来。

二、webpack

以React的脚手架搭建出来的工程为例，核心是html-webpack-plugin这个插件。

使用npm run eject之后，修改config/webpack.config.js文件，添加一句：

// 放在const paths = require("./paths");之后。这句就是读取了package.json文件
const appPackageJson = require(paths.appPackageJson);

搜索HtmlWebpackPlugin，找到这段代码：

 plugins: [// Generates an `index.html` file with the <script> injected.new HtmlWebpackPlugin(Object.assign({},{inject: true,template: paths.appHtml,},...))]

修改Object.assign的第一个参数：

Object.assign({meta: {version: appPackageJson.version,},},{inject: true,template: paths.appHtml,},)

这样，页面的head中就有了版本号：

不使用eject当然也是可以的，有脚手架提供的钩子函数，原理一样，都是修改这里，就不赘述了。

三、vite

对于vite项目，可以使用vite-plugin-html-template插件。在vite.config.ts中添加以下代码：

import htmlTemplate from 'vite-plugin-html-template'
import { version } from "./package.json";// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), htmlTemplate({data: {version},}),],...
})

因为引用了json文件，需要修改默认的tsconfig.config.json，在include中添加package.json：

{"include": [xxx, "package.json"],
}

将index.html移动到public目录下，在head中添加一句：

<head><meta version="<%- version %>" />...
</head>

原来body中的script要去掉：

<body><div id="app"></div><script type="module" src="/src/main.ts"></script>
</body>

这样在页面上就能看到版本号了：

四、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注✨，一起加油☕

相关文章：

前端工程注入版本号

文章目录 一、前言二、webpack三、vite四、最后 一、前言 容器化时代&#xff0c;当页面出现问题时&#xff0c;如果你的新版本有可能已经修复了&#xff0c;那样你再排查它就没有意义了。为什么不一定是最新版本呢&#xff1f;一是可能是缓存作祟&#xff0c;二是可能运维成员…...

编程日记 2023/12/25 23:53:55

Android 10.0 SystemUI禁用长按recent键的分屏功能

1.前言 在10.0的系统产品开发中，系统对于多窗口模式默认会有分屏功能的，但是在某些产品中，需要禁用分屏模式，所以需要在导航栏中 禁用长按recent的分屏模式功能，接下来分析下相关分屏模式的实现 2.SystemUI禁用长按recent键的分屏功能的核心类 frameworks\base\packa…...

编程日记 2023/12/25 23:52:54

自媒体实战篇:作品爆款三要素的使用场景和重要性

作品爆款三要素的使用场景和重要性 什么是爆款三要素 标题 概括视频内容,吸引用户注意封面 吸引眼球,引发作者联想标签 精准分类,有利于平台精准推流优质标题要求 标题就是介绍视频故事内容的一段话,通常分为三段式注册,统称三段式标题好的标题统称是三段式的,即点明故事…...

编程日记 2023/12/25 23:51:53

Hbase的安装配置

注&#xff1a;本文默认已经完成hadoop的下载以及环境配置 1.上传zookeeper和hbase压缩包到指令路径并且解压 (理论上讲&#xff0c;hbase其实内置了zookeeper&#xff0c;我们也可以不另外下载&#xff0c;另外下载的目的在于减少组件间依赖性) cd /home mkir hbase cd /hom…...

编程日记 2023/12/25 23:50:52

VMware17Pro虚拟机安装Linux CentOS 7.9(龙蜥)教程(超详细)

目录 1. 前言2. 下载所需文件3. 安装VMware3.1 安装3.2 启动并查看版本信息3.3 虚拟机默认位置配置 4. 安装Linux4.1 新建虚拟机4.2 安装操作系统4.2.1 选择 ISO 映像文件4.2.2 开启虚拟机4.2.3 选择语言4.2.4 软件选择4.2.5 禁用KDUMP4.2.6 安装位置配置4.2.7 网络和主机名配置…...

编程日记 2023/12/25 23:49:52

QT trimmed和simplified

trimmed&#xff1a;去除了字符串开头前和结尾后的空白&#xff1b; simplified&#xff1a;去除了字符串开头前和结尾后的空白&#xff0c;以及中间内部的空白字符也去掉&#xff08;\t,\n,\v,\f,\r和 &#xff09; 代码&#xff1a; QString str " 1 2 3 4 5 …...

编程日记 2023/12/25 23:47:50

Ensp dhcp全局地址池（配置命令 + 实例）

使用DHCP的好处&#xff1a;减少管理员的工作量、避免输入错误的可能、避免ip冲突 DHCP报文类型&#xff1a; DHCP DISCOVER:客户端用来寻找DHCP服务器 DHCP OFFER:DHCP服务器用来响应DHCP DISCOVER报文&#xff0c;此报文携带了各种配置信息 DHCP REQUEST:客户端配置请求确…...

编程日记 2023/12/25 23:44:47

spring aop实际开发中怎么用，Spring Boot整合AOP，spring boot加spring mvc一起使用aop，项目中使用aop

前言&#xff1a;本文不介绍 AOP 的基本概念、动态代理方式实现 AOP&#xff0c;以及 Spring 框架去实现 AOP。本文重点介绍 Spring Boot 项目中如何使用 AOP&#xff0c;也就是实际项目开发中如何使用 AOP 去实现相关功能。 如果有需要了解 AOP 的概念、动态代理实现 AOP 的&…...

编程日记 2023/12/25 23:43:46

C语言操作符if语句好习惯 详解分析操作符（详解4）

各位少年&#xff1a; 前言 还记得我们上一章讲过一个比较抽象的代码&#xff0c;它要比较两次都是真的情况下才能打印&#xff0c;那么很显然这样写代码是有弊端的&#xff1f;哪我们C语言之父丹尼斯.里奇&#xff0c;先介绍一下上次拉掉了if语句的好习惯 好再分享一些操作符…...

编程日记 2023/12/25 23:42:46

【什么是泛型，有什么好处】

✅什么是泛型&#xff0c;有什么好处 ✅典型回答✅泛型是如何实现的✅什么是类型擦除&#xff1f;&#x1f4dd;C语言对泛型的支持&#x1f4dd;泛型擦除的缺点有哪些&#xff1f; ✅对泛型通配符的理解&#x1f4dd;泛型中上下界限定符 extends 和 super 有什么区别&#xff1…...

编程日记 2023/12/25 23:37:41

Stable Diffusion系列（三）：网络分类与选择

文章目录 网络分类模型基座模型衍生模型二次元模型2.5D模型写实风格模型 名称解读 VAELora嵌入文件放置界面使用 网络分类 当使用SD webui绘图时&#xff0c;为了提升绘图质量&#xff0c;可以多种网络混合使用&#xff0c;可选的网络包括了模型、VAE、超网络、Lora和嵌入。 …...

编程日记 2023/12/25 23:35:38

Twincat中PLC的ST语言编程实现机器人安全交互

在TwinCAT中&#xff0c;使用ST语言&#xff08;Structured Text&#xff09;进行PLC编程是一种常见的做法。 机器人接触力超过预设阈值后执行停止动作 为了实现机器人在接触力超过预设阈值后停止动作的功能&#xff0c;你需要编写一段ST语言代码&#xff0c;以检查当前的接触…...

编程日记 2023/12/25 23:34:37

Redis实现日榜|直播间榜单|排行榜|Redis实现日榜01

前言 直播间贡献榜是一种常见的直播平台功能&#xff0c;用于展示观众在直播过程中的贡献情况。它可以根据观众的互动行为和贡献值进行排名&#xff0c;并实时更新&#xff0c;以鼓励观众积极参与直播活动。 在直播间贡献榜中&#xff0c;每个观众都有一个对应的贡献值&#…...

编程日记 2023/12/25 23:33:36

如何使用内网穿透工具实现Java远程连接本地Elasticsearch搜索分析引擎

文章目录 前言1. Windows 安装 Cpolar2. 创建Elasticsearch公网连接地址3. 远程连接Elasticsearch4. 设置固定二级子域名 前言 简单几步,结合Cpolar 内网穿透工具实现Java 远程连接操作本地分布式搜索和数据分析引擎Elasticsearch。 Cpolar内网穿透提供了更高的安全性和隐私保…...

编程日记 2023/12/25 23:30:32

C语言数据结构-----常用七种排序介绍、分类、实现及性能比较

前言 ①排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 ②稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经过排序&#…...

编程日记 2023/12/25 23:28:31

2023年山东省职业院校技能大赛高职组 “软件测试”赛项竞赛任务四 单元测试

任务四 单元测试 任务要求 题目1&#xff1a;任意输入2个正整数值分别存入x、y中&#xff0c;据此完成下述分析&#xff1a;若x≤0或y≤0&#xff0c;则提示&#xff1a;“输入不符合要求。”&#xff1b;若2值相同&#xff0c;则提示“可以构建圆形或正方形”&#xff1b;若2…...

编程日记 2023/12/25 23:26:29

在Redis客户端设置连接密码 并演示密码登录

我们先连接到Redis服务 然后 我们要输入 CONFIG SET requirepass “新密码” 例如 CONFIG SET requirepass "A15167"这样 密码就被设置成立 A15167 我们 输入 AUTH 密码 例如 AUTH A15167这里 返回OK说明成功了 然后 我们退出在登录就真的需要 redis-cli -h IP地…...

编程日记 2023/12/25 23:24:28

阿里云公有云平台

1. 请简要介绍一下公有云平台的基本概念和特点。 公有云是一种云计算模型&#xff0c;其中服务器、网络和存储资源等IT基础架构以虚拟资源的形式提供&#xff0c;并且可以通过互联网进行访问。这些资源是由第三方提供商共享并提供给用户的&#xff0c;包括计算、存储、网络等。…...

编程日记 2023/12/25 23:23:26

Zookeeper的学习笔记

Zookeeper概念 Zookeeper是一个树形目录服务&#xff0c;简称zk。 Zookeeper是一个分布式的、开源的分布式应用程序的协调服务 Zookeeper提供主要的功能包括&#xff1a;配置管理&#xff0c;分布式锁&#xff0c;集群管理 Zookeeper命令操作 zk数据模型 zk中的每一个节点…...

编程日记 2023/12/25 23:21:25

leetcode2两数加和问题（链表）

题目思路&#xff1a; ①创建一个int类型的局部变量&#xff0c;用来存储两个结点的Val值。 ②判断该Val值与10求余(mod)后是否大于0,如果大于0, 则需要在下一个结点进位。 ③最关键的步骤&#xff1a;实现l1&#xff0c;l2结点数值相加后构建新的存储求和后的结点&#xff0…...

编程日记 2023/12/25 23:15:19

VSCode中配置prettier和ESLint

文章目录 了解ESLint和Prettier的作用prettier配置ESLint配置常见问答ESLint 和Prettier 有什么区别&#xff1f;为什么我应该同时使用ESLint 和Prettier&#xff1f;在使用ESLint 和Prettier 时&#xff0c;有可能出现它们之间的规则冲突吗&#xff1f;我已经在项目中使用了ES…...

编程日记 2023/12/25 23:13:18

如何将本地websocket发布至公网并实现远程访问服务端

文章目录 1. Java 服务端demo环境2. 在pom文件引入第三包封装的netty框架maven坐标3. 创建服务端,以接口模式调用,方便外部调用4. 启动服务,出现以下信息表示启动成功,暴露端口默认99995. 创建隧道映射内网端口6. 查看状态->在线隧道,复制所创建隧道的公网地址加端口号7. 以…...

编程日记 2023/12/25 23:12:17

分享 | 软件测试的基本流程是什么？软件测试流程详细介绍

软件测试 软件测试和软件开发一样&#xff0c;是一个比较复杂的工作过程&#xff0c;如果无章法可循&#xff0c;随意进行测试势必会造成测试工作的混乱。为了使测试工作标准化、规范化&#xff0c;并且快速、高效、高质量地完成测试工作&#xff0c;需要制订完整且具体的测试…...

编程日记 2023/12/25 23:10:15

浮点数的转换--IEEE 754

IEEE754标准是一种浮点数表示标准&#xff0c;一般分为 单精度&#xff08;32位的二进制数&#xff09;&#xff1b;双精度&#xff08;64位的二进制数&#xff09; 根据国际标准IEEE754&#xff0c;任意一个二进制浮点数V可以表示为下面形式&#xff1a; V (-1)^s *&#…...

编程日记 2023/12/25 23:05:11

若依框架介绍

RuoYi&#xff08;若依&#xff09;是一款基于Spring Boot、Spring Cloud等开源框架搭建的企业级开发平台&#xff0c;旨在提供全面的解决方案&#xff0c;简化企业级应用开发&#xff0c;提高开发效率。 主要特点&#xff1a; 1. 模块化设计 RuoYi采用模块化的设计&#xff0…...

编程日记 2023/12/25 22:59:06

iMazing2024免费版iOS移动设备管理软件

以自己的方式管理iPhone&#xff0c;让备受信赖的软件为您传输和保存音乐、消息、文件和数据。安全备份任何 iPhone、iPad 或 iPod touch。iMazing 功能强大、易于使用&#xff0c;称得上是 Mac 和 PC 上最好的 iOS 设备管理器。 正在为iTunes繁琐的操作发愁&#xff1f;设备数…...

编程日记 2023/12/25 22:58:05

Zookeeper整合Java实战，不同客户端使用汇总

Java学习面试指南&#xff1a;https://javaxiaobear.cn ZooKeeper应用的开发主要通过Java客户端API去连接和操作ZooKeeper集群。可供选择的Java客户端API有&#xff1a; ZooKeeper官方的Java客户端API。 第三方的Java客户端API&#xff0c;比如Curator。 ZooKeeper官方的客户…...

编程日记 2023/12/25 22:57:04

【python】Ubuntu下安装spyder及matplotlib中文显示

一、查看Ubuntu版本 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy尝试用cat /etc/debian_version命令&#xff0c;竟然可以显示出来Debian的版本。 $ cat /etc/debian_version …...

编程日记 2023/12/25 22:56:03

Vue中操作dom,jQuery添加css类,document对象不可使用

...

编程日记 2023/12/25 22:54:00

《运维人员的未来：IT界的“万金油“如何继续闪耀光芒》

文章目录 每日一句正能量前言35岁被称为运维半衰期&#xff0c;究竟为何&#xff1f;如何顺利过渡半衰期运维的职业发展路径后记 每日一句正能量 凡事顺其自然&#xff0c;遇事处于泰然&#xff0c;得意之时淡然&#xff0c;失意之时坦然&#xff0c;艰辛曲折必然&#xff0c;历…...

编程日记 2023/12/25 22:49:56

ip addr和ifconfig

ip addr可以显示更多信息&#xff0c;包括为启动的网络驱动如wlan&#xff0c;而ifocnfig只显示在线的驱动。若wlan是down的&#xff0c;则ip addr会显示信息&#xff0c;ifconfig不会显示信息。 ip addr: ifconfig:...

编程日记 2023/12/25 22:47:54

Crow：Middlewares 庖丁解牛7 after_handlers_call_helper

Crow：Middlewares 庖丁解牛6 middleware_call_helper-CSDN博客 介绍了对插件before_handle的调用 当完成了detail::middleware_call_helper的调用后，如果没有在before_handle中设置req被终止处理，也就是 if (!res.completed_) {need_to_call_after_handlers_ = true;handler…...

编程日记 2023/12/25 22:44:52

ts相关笔记（extends、infer、Pick、Omit）

最近刷了本ts小册&#xff0c;对一些知识点做下笔记。 extends extends 是一个关键字&#xff0c;用于对类型参数做一些约束。 A extends B 意味着 A 是 B 的子类型&#xff0c;比如下面是成立的 ‘abc’ extends string599 extends number 看下面例子&#xff1a; type …...

编程日记 2023/12/25 22:41:49

8.21 PowerBI系列之DAX函数专题-帕累托分析

需求 实现 1 按商品小类累积 var rollup_sales calculate(//计算当前累计销售额 [销售额], filter(allselected(order_2[产品小类]),sum(order_2[订单金额])<[销售额]) ) //按小类累积金额,filter内的销售额为选中的各小类的销售额 //金额从大到小累积&#xff0c;用&l…...

编程日记 2023/12/25 22:40:49

结构体-2-测试排名

22-结构体-2-测试排名 [命题人 : 外部导入] 时间限制 : 1.000 sec 内存限制 : 128 MB 题目描述 为了提升同学们的编程能力&#xff0c;老师们会在平时进行C语言的上机测试&#xff0c;了解班上同学的学习情况&#xff0c;对于一些测试成绩较差的同学&#xff0c;老师会进行督促…...

编程日记 2023/12/25 22:38:47

LeetCode刷题---快乐数

解题思路 该题的解题思路为使用哈希表来存储每次平方的和的结果&#xff0c;看是否有重复的数&#xff0c;如果存在第n次的平方和的数和第i次(i<n)平方和的数想等&#xff0c;那么它就不是一个快乐数。否则&#xff0c;则为快乐数。 代码实现&#xff1a; public boolean i…...

编程日记 2023/12/25 22:33:42

web前端游戏项目-辨色大比拼【附源码】

web前端游戏项目-辨色大比拼【附源码】 《辨色大比拼》是一个旨在测试和提升玩家颜色识别能力的在线游戏。在游戏中&#xff0c;玩家将通过辨识颜色来解谜并推进游戏进程。辨色大比拼也是一个寓教于乐的游戏&#xff0c;它不仅提供了一个有趣的辨色挑战&#xff0c;还能帮助玩…...

编程日记 2023/12/25 22:32:41

MongoDB操作_数据库_集合

.......................................................................................................................................................... 三、MongoDB操作 3.1 数据库操作 一个mongodb中可以建立多个数据库。 MongoDB的默认数据库为"test…...

编程日记 2023/12/25 22:30:39

50个免费的 AI 工具，提升工作效率（附网址）

上次我们已经介绍了20个精选的提高工作效率的免费AI工具&#xff0c;但如果你觉得这些AI工具还不过瘾的话&#xff0c;想进一步成为职场中最了解AI的人&#xff0c;本文将汇总介绍免费最新的50个AI工具。 DeepSwap DeepSwap 是一个基于 AI 的工具&#xff0c;适用于想要制作令人…...

编程日记 2023/12/25 22:29:38

g++ strip debug

strip(1) command_--strip-debug-CSDN博客 strip main.outll main.out -rwxr-xr-x 1 root root 6272 Mar 22 16:14 main.outfile main.out main.out: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), dynamically linked (uses shared libs), for GNU/Linux 2.6.32, Bu…...

编程日记 2023/12/25 22:28:37

微服务实战系列之Dubbo（上）

前言 随着一年一度冬至的到来&#xff0c;2023的步伐也将远去。而博主的系列文章&#xff0c;也将从今天起&#xff0c;越来越聚焦如何构建微服务“内核”上。前序系列文章几乎囊括了微服务的方方面面&#xff0c;无论使用什么框架、组件或工具&#xff0c;皆可拿来用之。 那么…...

编程日记 2023/12/25 22:27:36

一篇讲透：箭头函数、普通函数有什么区别

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热衷分享有趣实用的文章&#xff0c;希望大家多多支持&#xff0c;一起进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 什么是箭头函数 箭头函数和普通函数的区别 更简洁的语法 箭头函数…...

编程日记 2023/12/25 22:21:30

第40节: Vue3 注册生命周期钩子

在UniApp中使用Vue3框架时&#xff0c;你可以注册生命周期钩子来执行特定的逻辑。以下是一个示例&#xff0c;演示了如何在UniApp中使用Vue3框架注册生命周期钩子&#xff1a; <template> <view> <p>{{ message }}</p> </view> </templ…...

编程日记 2023/12/25 22:20:30

docker给容器分配固定ip

1.为 Docker 容器设置一个固定的 IP 地址 要为 Docker 容器设置一个固定的 IP 地址&#xff0c;有几种常见的方法&#xff1a; 使用自定义网络和静态 IP 地址&#xff1a; 你可以创建一个自定义的 Docker 网络&#xff0c;并在这个网络上为容器分配静态 IP 地址。首先&#x…...

编程日记 2023/12/25 22:19:29

Hadoop入门学习笔记——二、在虚拟机里部署HDFS集群

视频课程地址&#xff1a;https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接&#xff1a;https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记&#xff08;汇总&#xff09; 目录 二、在虚拟机里部署HDFS集群2.1. 部署node1虚拟机2.2. 部…...

编程日记 2023/12/25 22:18:28

Spring之国际化：i18n

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…...

编程日记 2023/12/25 22:17:27

Java读取类路径下的JSON文件并转换为实体列表

使用 Jackson 库来读取类路径下的 JSON 文件并将其转换为对应实体列表。 在实际开发中可能在本地环境中需要调用别人的接口&#xff0c;别人的接口如果还没开发好或者本地环境不支持外部接口调用的时候&#xff0c;可以读取json文件来造数据&#xff0c;方便调试。 以Student…...

编程日记 2023/12/25 22:15:24

复分析——第1章——复分析准备知识(E.M. Stein R. Shakarchi)

第一章 复分析准备知识 (Preliminaries to Complex Analysis) The sweeping development of mathematics during the last two centuries is due in large part to the introduction of complex numbers; paradoxically, this is based on the seemingly absurd no…...

编程日记 2023/12/25 22:12:20

C++ 继承方式

C++ 继承方式 实验介绍 本章节将学习权限关键字的使用，并将一一举例验证 public、protected、private 的使用，学完本小节实验后将彻底掌握权限关键字的使用。 知识点 权限关键字使用位置继承中的权限关键字public 继承protected 继承private 继承权限关键字使用位置 示例…...

编程日记 2023/12/25 22:03:13

华为云Windows Server服务器下，Node使用pm2-logrotate分割pm2日志，解决pm2日志内存占用过高的问题。

一、简介 PM2 是一个守护进程管理器&#xff0c;它将帮助您管理和保持您的应用程序在线。PM2 入门很简单&#xff0c;它以简单直观的 CLI 形式提供&#xff0c;可通过 NPM 安装。官网地址&#xff1a;https://pm2.keymetrics.io/ 二、问题&#xff1a;pm2日志内存占用过高&am…...

编程日记 2023/12/25 22:01:11