宝格丽网站建设策划案/手机怎么创建自己的网站平台
文章目录
- 一、前言
- 二、`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四、最后 一、前言 容器化时代,当页面出现问题时,如果你的新版本有可能已经修复了,那样你再排查它就没有意义了。为什么不一定是最新版本呢?一是可能是缓存作祟,二是可能运维成员…...

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

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

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

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 网络和主机名配置…...

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

Ensp dhcp全局地址池(配置命令 + 实例)
使用DHCP的好处:减少管理员的工作量、避免输入错误的可能、避免ip冲突 DHCP报文类型: DHCP DISCOVER:客户端用来寻找DHCP服务器 DHCP OFFER:DHCP服务器用来响应DHCP DISCOVER报文,此报文携带了各种配置信息 DHCP REQUEST:客户端配置请求确…...

spring aop实际开发中怎么用,Spring Boot整合AOP,spring boot加spring mvc一起使用aop,项目中使用aop
前言:本文不介绍 AOP 的基本概念、动态代理方式实现 AOP,以及 Spring 框架去实现 AOP。本文重点介绍 Spring Boot 项目中如何使用 AOP,也就是实际项目开发中如何使用 AOP 去实现相关功能。 如果有需要了解 AOP 的概念、动态代理实现 AOP 的&…...

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

【什么是泛型,有什么好处】
✅什么是泛型,有什么好处 ✅典型回答✅泛型是如何实现的✅什么是类型擦除?📝C语言对泛型的支持📝泛型擦除的缺点有哪些? ✅对泛型通配符的理解📝泛型中上下界限定符 extends 和 super 有什么区别࿱…...

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

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

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

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

C语言数据结构-----常用七种排序介绍、分类、实现及性能比较
前言 ①排序:所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。 ②稳定性:假定在待排序的记录序列中,存在多个具有相同的关键字的记录,若经过排序&#…...

2023年山东省职业院校技能大赛高职组 “软件测试”赛项竞赛任务四 单元测试
任务四 单元测试 任务要求 题目1:任意输入2个正整数值分别存入x、y中,据此完成下述分析:若x≤0或y≤0,则提示:“输入不符合要求。”;若2值相同,则提示“可以构建圆形或正方形”;若2…...

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

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

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

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

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

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

分享 | 软件测试的基本流程是什么?软件测试流程详细介绍
软件测试 软件测试和软件开发一样,是一个比较复杂的工作过程,如果无章法可循,随意进行测试势必会造成测试工作的混乱。为了使测试工作标准化、规范化,并且快速、高效、高质量地完成测试工作,需要制订完整且具体的测试…...

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

若依框架介绍
RuoYi(若依)是一款基于Spring Boot、Spring Cloud等开源框架搭建的企业级开发平台,旨在提供全面的解决方案,简化企业级应用开发,提高开发效率。 主要特点: 1. 模块化设计 RuoYi采用模块化的设计࿰…...

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

Zookeeper整合Java实战,不同客户端使用汇总
Java学习面试指南:https://javaxiaobear.cn ZooKeeper应用的开发主要通过Java客户端API去连接和操作ZooKeeper集群。可供选择的Java客户端API有: ZooKeeper官方的Java客户端API。 第三方的Java客户端API,比如Curator。 ZooKeeper官方的客户…...

【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命令,竟然可以显示出来Debian的版本。 $ cat /etc/debian_version …...

《运维人员的未来:IT界的“万金油“如何继续闪耀光芒》
文章目录 每日一句正能量前言35岁被称为运维半衰期,究竟为何?如何顺利过渡半衰期运维的职业发展路径后记 每日一句正能量 凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历…...