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

前端实现版本更新自动检测✅

news 来源：原创 2025/8/24 13:26:50

在这里插入图片描述

🤖 作者简介：水煮白菜王，一位资深前端劝退师 👻
👀 文章专栏：前端专栏，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。
感谢支持💕💕💕

一、背景
二、实现原理
- 2.1 逻辑
- 2.2 一些好处
三、具体实现
- 3.1 工程化封装
- 3.2 关键方法解析
- - 脚本哈希获取：
  - 对比逻辑：
四、全部代码🚀🚀🚀
- 4.1 vue3
- 4.2 vue2
五、注意事项与常见问题
- 5.1 可能出现的问题
- 5.2 浏览器兼容方案

一、背景

在现代Web应用中，部署前端版本更新后及时提醒用户进行页面刷新是必要的。由于单页面应用（SPA）的路由特性和浏览器缓存机制，用户浏览器可能不会自动加载最新的代码资源。这会导致用户未能体验到最新的功能变化，甚至遇Bug或不一致的行为。通过实现一种自动检测机制来提醒用户有新的版本，并引导其刷新页面，可以有效地解决这个问题，保证所有用户都能及时使用最新版应用的功能。

二、实现原理

2.1 逻辑

通过对比构建打包出文件的哈希值变化实现版本检测：

定时轮询：每分钟检查静态资源变化
哈希对比：通过解析HTML中script标签指纹判断更新
强制刷新：检测到更新后提示用户刷新页面

// 核心对比逻辑
const isChanged = (oldSet, newSet) => {return oldSet.size !== newSet.size || ![...oldSet].every(hash => newSet.has(hash))
}

2.2 一些好处

通用性强：适用于任意前端框架
无侵入式检测：不依赖构建工具配置
用户可控：提示框让用户选择刷新时机
精准检测：通过对比script标签内容哈希值
低资源消耗：每分钟检测一次，单次请求性能消耗低

三、具体实现

3.1 工程化封装

// useVersionHash.js 核心实现
export default function useVersionHash() {// 状态管理const timerUpdate = ref(null)let scriptHashes = new Set()// 生命周期onMounted(() => startTimer())onBeforeUnmount(() => stopTimer())// 业务方法const fetchScriptHashes = async () => { /*...*/ }const compareScriptHashes = async () => { /*...*/ }return { compareScriptHashes }
}

3.2 关键方法解析

脚本哈希获取：

const fetchScriptHashes = async () => {const html = await fetch('/').then(res => res.text())const scriptRegex = /<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/gireturn new Set(html?.match(scriptRegex) || [])
}

对比逻辑：

if (scriptHashes.size === 0) {// 初始化基准值scriptHashes = newScriptHashes  
} else if (scriptHashes.size !== newScriptHashes.size ||![...scriptHashes].every(hash => newScriptHashes.has(hash))
) {// 触发更新流程stopTimer()showUpdateDialog()
}

四、全部代码🚀🚀🚀

4.1 vue3

1、use-version-update.js具体逻辑

// @/utils/use-version-update.js
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ElMessageBox } from 'element-plus'let scriptHashes = new Set()
const timerUpdate = ref(null)export default function useVersionHash() {const isProduction = import.meta.env.MODE === 'production'const fetchScriptHashes = async () => {try {const html = await fetch('/').then((res) => res.text())const scriptRegex = /<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/gireturn new Set(html?.match(scriptRegex) || [])} catch (error) {console.error('获取脚本哈希失败:', error)return new Set()}}const compareScriptHashes = async () => {try {const newScriptHashes = await fetchScriptHashes()if (scriptHashes.size === 0) {scriptHashes = newScriptHashes} else if (scriptHashes.size !== newScriptHashes.size ||![...scriptHashes].every(hash => newScriptHashes.has(hash))) {stopTimer()updateNotice()}} catch (error) {console.error('版本检查失败:', error)}}const updateNotice = () => {ElMessageBox.confirm('检测到新版本，建议立即更新以确保平台正常使用','更新提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => window.location.reload())}const startTimer = () => {if (!isProduction) returntimerUpdate.value = setInterval(compareScriptHashes, 60000)}const stopTimer = () => {timerUpdate.value && clearInterval(timerUpdate.value)}onMounted(startTimer)onBeforeUnmount(stopTimer)return { compareScriptHashes, updateNotice }
}

2、引入use-version-update.js

// App.vue
import versionUpdatefrom '@/utils/use-version-update.js'
export default {setup() {const { updateNotice } = versionUpdate()return { updateNotice }}
}

3、Vite 相关配置

// vite.config.js
import { defineConfig } from 'vite'export default defineConfig({build: {rollupOptions: {output: {// 主入口文件命名规则entryFileNames: 'js/[name]-[hash:8].js',// 代码分割块命名规则chunkFileNames: 'js/[name]-[hash:8].js',// 静态资源文件命名规则assetFileNames: ({ name }) => {const ext = name?.split('.').pop()return `assets/${ext}/[name]-[hash:8].[ext]`}}},// 启用文件哈希的manifest生成manifest: true}
})

也可以将use-version-update写成以JS、TS模块化封装，在入口文件中main.ts引入

// use-version-update.ts
export const versionUpdate = () => {... 具体处理逻辑
}// main.ts
import { versionUpdate} from "@/utils/use-version-update"
if (import.meta.env.MODE == 'production') {versionUpdate()
}

4.2 vue2

1、use-version-update.js具体逻辑

/** @Author: baicaiKing* @Date: 2025-01-02 13:50:33* @LastEditors: Do not edit* @LastEditTime: 2025-01-03 09:40:36* @FilePath: \code\src\utils\use-version-update.js*/
// 存储当前脚本标签的哈希值集合
let scriptHashes = new Set();
let timerUpdate = undefined;
export default {data() {return {};},created() {},mounted() {// 每60秒检查一次是否有新的脚本标签更新if (process.env.NODE_ENV === 'production') { // 只针对生产环境timerUpdate= setInterval(() => {this.compareScriptHashes()}, 60000);}},beforeDestroy() {clearInterval(timerUpdate);timerUpdate = null;},methods: {/*** 从首页获取脚本标签的哈希值集合* @returns {Promise<Set<string>>} 返回包含脚本标签的哈希值的集合*/async fetchScriptHashes() {// 获取首页HTML内容const html = await fetch('/').then((res) => res.text());// 正则表达式匹配所有<script>标签const scriptRegex = /<script(?:\s+[^>]*)?>(.*?)<\/script\s*>/gi;// 获取匹配到的所有<script>标签内容// const scripts = html.match(scriptRegex) ?? [];const scripts = html ? html.match(scriptRegex) || [] : [];// 将脚本标签内容存入集合并返回return new Set(scripts);},/*** 比较当前脚本标签的哈希值集合与新获取的集合，检测是否有更新*/async compareScriptHashes() {// 获取新的脚本标签哈希值集合const newScriptHashes = await this.fetchScriptHashes();if (scriptHashes.size === 0) {// 初次运行时，存储当前脚本标签哈希值scriptHashes = newScriptHashes;} else if (scriptHashes.size !== newScriptHashes.size ||![...scriptHashes].every((hash) => newScriptHashes.has(hash))) {// 如果脚本标签数量或内容发生变化，则认为有更新console.info('已检测到更新文件', {oldScript: [...scriptHashes],newScript: [...newScriptHashes],});// 清除定时器clearInterval(timerUpdate);// 提示用户更新this.updateNotice();} else {// 没有更新console.info('未检测到更新时机', {oldScript: [...scriptHashes],});}},updateNotice() {this.$confirm('检测到新版本，建议立即更新以确保平台正常使用', '更新提示', {confirmButtonText: '确定',cancelButtonText: '取消（自行刷新）',type: 'warning'}).then(() => {window.location.reload();}).catch(() => {console.eror('用户取消刷新！');});}},};

2、引入use-version-update.js

// App.vue
import versionUpdate from "@/util/use-version-update.js";
export default {name: "app",mixins: [versionUpdate],data() {return {};},
};

3、Webpack 相关配置


// vue.config
module.exports = {configureWebpack: {output: {filename: 'js/[name].[hash].js',// filename: 'js/[name].[contenthash].js',},},devServer: {},
};

五、注意事项与常见问题

5.1 可能出现的问题

问题现象	可能原因	解决方案
检测不准确	正则匹配失效	更新正则表达式
生产环境未生效	环境变量配置错误	检查构建配置
跨域请求失败	部署路径不匹配	调整fetch请求路径
内存泄漏	定时器未正确清除	使用`WeakRef`优化

5.2 浏览器兼容方案

可结合Service Worker实现无缝更新

// 支持Service Worker的渐进增强方案
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js').then(reg => {reg.addEventListener('updatefound', () => {showUpdateNotification()})})
}

同时要确保服务器配置正确缓存策略，通常Nginx缓存策略默认不用打理

在这里插入图片描述
如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀

前端实现版本更新自动检测✅

🤖 作者简介：水煮白菜王，一位资深前端劝退师 👻 👀 文章专栏： 前端专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。感谢支持💕💕&a…...

编程日记 2025/8/24 13:26:50

Python零基础学习第三天：函数与数据结构

一、函数基础函数是什么？ 想象你每天都要重复做同一件事，比如泡咖啡。函数就像你写好的泡咖啡步骤说明书，每次需要时直接按步骤执行，不用重新想流程。 # 定义泡咖啡的函数 def make_coffee(sugar1): # 默认加1勺糖 print("…...

编程日记 2025/8/24 13:23:43

深入了解Linux —— 调试程序

前言我们已经学习了linux下许多的工具，vim、gcc、make/makefile等； 已经能够在linux写代码，并且进行编译运行，让程序在linux下跑起来。但是，如果我们在写代码的时候遇见了错误；但是我们并不知道错误在哪&…...

编程日记 2025/8/24 13:23:43

解决VScode 连接不上问题

问题 ：VScode 连接不上解决方案： 1、手动杀死VS Code服务器进程，然后重新尝试登录打开xshell ，远程连接服务器 ，查看vscode的进程 ，然后全部杀掉 [cxqiZwz9fjj2ssnshikw14avaZ ~]$ ps ajx | grep vsc…...

编程日记 2025/8/24 13:20:18

行式数据库与列式数据库区别

列式数据库（Columnar Database）和行式数据库（Row-based Database）是两种不同的数据存储和检索方式，它们在数据组织、存储结构和适用场景上有显著区别。以下是对两者的详细对比： 1. 数据存储方式行式数据库…...

编程日记 2025/8/24 13:23:43

如何将本地已有的仓库上传到gitee （使用UGit）

1、登录Gitee。 2、点击个人头像旁边的加号，选择新建仓库： 3、填写仓库相关信息 4、复制Gitee仓库的地址 5、绑定我们的本地仓库与远程仓库 6、将本地仓库发布（推送）到远程仓库： 注意到此处报错&#xff…...

编程日记 2025/8/24 13:22:08

FIWARE：开源的物联网平台，支持设备虚拟化和数据管理

FIWARE 是一个开源的物联网（IoT）平台，旨在为物联网应用提供强大的数据管理和设备虚拟化功能。FIWARE 提供了一系列通用的 API 和组件，支持设备管理、数据采集、数据处理、数据共享和安全通信等功能，使得开发者能够快速构建和扩展物联网解决方案。以下是 FIWARE 的核心功能…...

编程日记 2025/8/24 13:26:49

RISC-V汇编学习（三）—— RV指令集

有了前两节对于RISC-V汇编、寄存器、汇编语法等的认识，本节开始介绍RISC-V指令集和伪指令。前面说了RISC-V的模块化特点，是以RV32I为作为ISA的核心模块，其他都是要基于此为基础，可以这样认为：RISC-V ISA 基本整数指…...

编程日记 2025/8/24 13:22:58

【Linux】冯诺依曼体系与操作系统理解

🌟🌟作者主页：ephemerals__ 🌟🌟所属专栏：Linux 目录前言一、冯诺依曼体系结构二、操作系统 1. 操作系统的概念 2. 操作系统存在的意义 3. 操作系统的管理方式 4. 补充：理解系统调用…...

编程日记 2025/8/24 13:23:42

Android15使用FFmpeg解码并播放MP4视频完整示例

效果: 1.编译FFmpeg库：下载FFmpeg-kit的源码并编译生成安装平台库 2.复制生成的FFmpeg库so文件与包含目录到自己的Android下如果没有prebuiltLibs目录，创建一个，然后复制包含目录只复制arm64-v8a下...

编程日记 2025/8/24 13:22:58

音视频入门基础：RTP专题（16）——RTP封装音频时，音频的有效载荷结构

一、引言《RFC 3640》和《RFC 6416》分别定义了两种对MPEG-4流的RTP封包方式，这两个文档都可以从RFC官网下载： RFC Editor 本文主要对《RFC 3640》中的音频打包方式进行简介。《RFC 3640》总共有43页，本文下面所说的“页数”是指在pdf阅读…...

编程日记 2025/8/24 13:22:59

3.3.2 Proteus第一个仿真图

文章目录文章介绍0 效果图1 新建“点灯”项目2 添加元器件3 元器件布局接线4 补充文章介绍本文介绍：使用Proteus仿真软件画第一个仿真图 0 效果图 1 新建“点灯”项目修改项目名称和路径，之后一直点“下一步”直到完成 2 添加元器件点击元…...

编程日记 2025/8/24 13:26:49

MySQL创建数据库和表，插入四大名著中的人物

一、登录数据库并创建数据库db_ck 二、创建表t_hero 表属性包括（id，name，nickname，age，gender，address，weapon，types） mysql> create table t_hero(-> id int,-…...

编程日记 2025/8/24 13:26:49

matlab和FPGA联合仿真时读写.txt文件数据的方法

在FPGA开发过程中，往往需要将MATLAB生成的数据作为原始激励灌入FPGA进行仿真。为了验证FPGA计算是否正确，又需要将FPGA计算结果导入MATLAB绘图与MATLAB计算结果对比。下面是MATLAB“写.txt”、“读.txt”，Verilog“读.txt”、“写.txt”的代…...

编程日记 2025/8/24 13:22:08

C++修炼之路：初识C++

Hello大家好！很高兴我们又见面啦！给生活添点passion，开始今天的编程之路！ 我的博客：<但凡. 我的专栏：《编程之路》、《数据结构与算法之美》、《题海拾贝》欢迎点赞，关注！ 引言 …...

编程日记 2025/8/24 13:26:49

ACE协议学习1

在多核系统或复杂SoC（System on Chip）中，不同处理器核心或IP（Intellectual Property）模块之间需要保持数据的一致性。常用的是ACE协议or CHI。先对ACE协议进行学习 ACE协议（Advanced Microcontroller Bu…...

编程日记 2025/8/24 13:26:49

通俗易懂的介绍LLM大模型技术常用专业名词（通用版）

1. 神经网络 (Neural Network) 解释: 一种模拟人脑神经元结构的计算模型，用于处理复杂的数据模式。示例: 图像识别中的卷积神经网络（CNN）。 2. 深度学习 (Deep Learning) 解释: 基于多层神经网络的机器学习方法，能够自动提取数…...

编程日记 2025/8/24 13:22:58

Anaconda 3.0 下载地址 Download Success | Anaconda CUDA 下载地址 cuda_12.4.0 https://developer.nvidia.com/cuda-12-4-0-download-archive?target_osWindows&target_archx86_64&target_version11&target_typeexe_local pytorch 下载地址 （2…...

编程日记 2025/8/24 13:23:43

【哇! C++】类和对象（五） - 赋值运算符重载

目录编辑一、运算符重载 1.1 运算符重载概念 1.2 全局运算符重载 1.3 运算符重载为成员函数二、赋值运算符重载的特性 2.1 赋值运算符重载需要注意的点 2.2 赋值运算符重载格式 2.2.1 传值返回 2.2.2 传引用返回 2.2.3 检查自己给自己赋值三、赋值运算符重载的…...

编程日记 2025/8/24 13:25:52

【时序图】1.StarUML绿化

1)下载地址官网: StarUML 如下: 2)绿化 step1:用管理员打开cmd，执行如下 npm install -g asar cd C:\Program Files\StarUML\resources //进入到StarUML的默认安装目录下面 asar extract app.asar app //反编译软件step2:把resources下的app文件夹拷贝出来到…...

编程日记 2025/8/24 9:57:37

mysql练习

创建数据库db_ck，再创建表t_hero，将四大名著中的主要人物都插入这个表中，将实现过程中sql提交上上来 1、创建数据库db_ck mysql> create database db_ck; 2、创建表t_hero mysql> use db_ck Database changed mysql> create table …...

编程日记 2025/8/23 2:14:23

数据结构（队列）

数据结构（队列） 什么是队列？ 队列和栈类似，也是一类特殊的线性表。特殊之处也是在于操作上。队列：只允许在一端进行插入数据操作（入队），在另一端进行删除数据操作（出队&…...

编程日记 2025/8/20 10:43:51

fps项目二次总结

文章目录角色角色蓝图动画蓝图角色蓝图与动画蓝图间的通信动画蓝图绑定在网格体上其他蓝图角色蓝图与其他蓝图的通信通信详解单向通信：A向B与B向A互不相通A向B发送消息A：发起方：即调用方B：接收方：即提供方&#xff1…...

编程日记 2025/8/23 7:42:55

VTK笔记- 3D Widget类 vtkSplineWidget 样条部件

vtk3DWidget vtk3DWidget是用于3D交互观察器的基类，也就是各种3D小部件类的基类，主要是在三维渲染场景中生成一个可以用于控制数据的可视化实体，比如点，线段（曲线）、平面、球体、包围盒（线框&am…...

编程日记 2025/8/21 14:53:07

文心一言：中国大模型时代的破局者与探路者

2023年，生成式人工智能（AIGC）的浪潮席卷全球，而百度推出的“文心一言”（ERNIE Bot）作为中国AI领域的代表性产品，迅速成为行业焦点。这款基于百度自主研发的“文心大模型”打造的对话式AI工具&am…...

编程日记 2025/8/16 10:04:19

【芯片验证】verificationguide上的36道UVM面试题

跟上一篇一样，verificationguide上的36到UVM面试题，通义回答ds判卷。 1. What is uvm_transaction, uvm_seq_item, uvm_object, uvm_component? uvm_transaction、uvm_seq_item、uvm_object、uvm_component是什么？ uvm_transaction是UVM中所有事务的基础类，用于表示仿真…...

编程日记 2025/8/21 15:50:33

操作系统控制台-健康守护我们的系统

引言基本准备体验功能健康守护系统诊断收获提升结语引言阿里云操作系统控制平台作为新一代云端服务器中枢平台，通过创新交互模式重构主机管理体验。操作系统控制台提供了一系列管理功能，包括运维监控、智能助手、扩展插件管理以及订阅服务等。用户可以…...

编程日记 2025/8/24 10:49:12

基于策略模式的智能提示语生成器设计与实现——以Tkinter GUI开发为例

基于策略模式的智能提示语生成器设计与实现——以Tkinter GUI开发为例一、引言：智能化时代的提示工程工具在人工智能技术广泛应用的时代背景下，如何与AI模型进行有效交互已成为关键技能。本文介绍的"AI任务需求与提示语策略生成器"正是基于…...

编程日记 2025/8/24 1:16:38

【打卡d1】算法模拟类

题目1 题目描述: 某百货公司为了促销，采用购物打折的优惠方法，每位顾客一次购物:在1000元以上者，按 9.5 折优惠;在2000以上者，按9折优惠;在3000以上者，按8.5 折优惠;在5000 以上者，按8折优惠;编写程序&…...

编程日记 2025/8/19 1:24:53

7.2 奇异值分解的基与矩阵

一、奇异值分解奇异值分解（SVD）是线性代数的高光时刻。 A A A 是一个 m n m\times n mn 的矩阵，可以是方阵或者长方形矩阵，秩为 r r r。我们要对角化 A A A，但并不是把它化成 X − 1 A X X^{-1}A X X−1AX 的形…...

编程日记 2025/8/23 13:55:49

3.3.2 用仿真图实现点灯效果

文章目录文章介绍Keil生成.hex代码Proteus仿真图中导入.hex代码文件开始仿真文章介绍点灯之前需要准备好仿真图keil代码仿真图参考前文：3.3.2 Proteus第一个仿真图 keil安装参考前文：3.1.2 Keil4安装教程 keil新建第一个项目参考前文：3.1…...

编程日记 2025/8/16 11:43:32

Docker 学习笔记：从入门到部署，实战演练全流程！

📌 开篇：为什么要学 Docker？ 还在为环境不一致、部署麻烦、依赖冲突头疼吗？Docker 让一切变得简单！作为现代开发和运维的神器，Docker 让我们可以用一句命令解决 “在我电脑上能跑” 的问题。今天&#x…...

编程日记 2025/8/19 5:42:57

本地搭建DeepSeek R1模型 + 前端

本地搭建DeepSeek R1模型前端配置： 操作系统：windows11 CPU：i5 13600KF GPU：英伟达4070 12GB 内存：16G DDR5 硬盘：1TB 模型安装本文采用Ollama进行安装。Ollama安装比较简单。官网&#xff1…...

编程日记 2025/8/22 10:08:50

MyBatis增删改查：静态与动态SQL语句拼接及SQL注入问题解析

MyBatis 是一个优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集的工作。本文将深入探讨 MyBatis 中的增删改查操作，重点讲解静态与动态 SQL 语句的拼接，并分析 S…...

编程日记 2025/8/21 15:41:11

Unity入门学习笔记（Day01）

一.认识unity工作面板 1.1.project window（项目面板） 显示当前项目中的所有文件和目录，包含了项目里面所有的资源文件 1.2.console window（输出面板） 显示当前游戏开发中生成的警告错误 1.3.hierarchy window&…...

编程日记 2025/8/19 5:43:06

教务考试管理系统-Sprintboot vue

一、前言 1.1 实践目的和要求本次实践的目的是为了帮助学生强化对实践涉及专业技术知识的理解，掌握专业领域中软件知识的应用方法，并了解软件工程在具体行业领域的发展趋势。通过培养学生利用软件工程方法分析、设计并完成具体行业软件开发的能力&…...

编程日记 2025/8/19 17:34:51

GHCTF2025--Web

upload?SSTI! import os import refrom flask import Flask, request, jsonify,render_template_string,send_from_directory, abort,redirect from werkzeug.utils import secure_filename import os from werkzeug.utils import secure_filenameapp Flask(__name__)# 配置…...

编程日记 2025/8/22 19:37:07

目录

一、背景

二、实现原理

2.1 逻辑

2.2 一些好处

三 、具体实现

3.1 工程化封装

3.2 关键方法解析

脚本哈希获取：

对比逻辑：

四、全部代码🚀🚀🚀

4.1 vue3

4.2 vue2

五、注意事项与常见问题

5.1 可能出现的问题

5.2 浏览器兼容方案

相关文章：

三、具体实现