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

web 开发中，前端部署更新后，该怎么通知用户刷新

news 来源：原创 2025/6/9 10:53:38

web 开发中，前端部署更新后，该怎么通知用户刷新？

浏览器为什么存在刷新按钮？🔘
- 因为需要重新加载js，css，html。但为何需要重新加载这些东西？
- 直白点说这些东西其实就是一个文档，一个特殊格式的文件而已，或者叫做资源一般来说文档这种东西是不会变，更不会频繁更改，所以浏览器有了缓存这个机制。
- 但是现代生产中，因为业务需求以及各种原因。需要频繁的更改 web 文件，或者采用前后端分离模式， spa 模式的开发，更不会让浏览器频繁的去触发 reload mod（重新加载模式）(这是一种加载策略)去加载新的 web 静态资源。
- 所以更新完前端之后，我们都会主动，手动的去刷新一下页面，加载新的 web 静态资源。

解决思路：

在 public 中新建一个manifest.json 文件，写入一段json记录
{"version": "null", "buildDate":"null-null" }
在打包 build的时候修改此文件记录 build时间和版本并放放置到 dist 文件夹下，代码示例如下；

update-manifest.js

const fs = require('fs');
const path = require('path');// 获取版本号和构建日期
const pkg = require('./package.json');
const version = pkg.version;
const buildDate = new Date().toISOString();// 定义源文件和目标文件的路径
const sourcePath = path.resolve(__dirname, 'public/manifest.json');
const destPath = path.resolve(__dirname, 'dist/manifest.json');// 读取源文件
fs.readFile(sourcePath, 'utf8', (err, data) => {if (err) {console.error('读取 manifest.json 失败:', err);return;}try {// 解析 JSON 数据const json = JSON.parse(data);// 修改内容json.version = version;json.buildDate = buildDate;// 将更新后的内容写入目标文件fs.writeFile(destPath, JSON.stringify(json, null, 2), 'utf8', (err) => {if (err) {console.error('写入 manifest.json 失败:', err);return;}console.log('manifest.json 已成功更新并写入到构建目录。');});} catch (parseErr) {console.error('解析 manifest.json 失败:', parseErr);}
});

package-lock.json,构建时执行node update-manifest.js

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build && node update-manifest.js"},

web 运行阶段，在前置路由守卫🪝函数中，去请求对比这个字段，不需要后端支持即可完成对新旧资源的标记对比。
基于ETag的更新检测，即HTTP ETag（实体标签）是服务器为某一资源生成的唯一标识，用于判断资源是否发生变化。
利用 fetch 对带有版本戳的manifest.json发起 HEAD 请求，可以仅获取响应头而不下载完整文件，并从中读取 ETag
ETag 本身只是一个http服务器定义的、用来标识资源版本的“指纹”，通常是对文件内容或最后修改时间做 Hash 计算得出。只要资源有任何字节级的变化（比如 buildDate 字段），ETag 就会不同。

 const response = await fetch('/manifest.json', { method: 'HEAD' });const newEtag = response.headers.get('ETag');if (lastEtag && newEtag !== lastEtag) {// 资源已更新，提示用户刷新alert('应用已更新，请刷新页面以获取最新内容。');}lastEtag = newEtag; //类似：W/"2f-MF1DC3HLp40L8jDZQxcReJxdlZA"
} catch (error) {console.error('检查更新时出错:', error);
}

当然其他方案也可以：

比如通过copy-webpack-plugin插件的配置✅
通过静态资源哈希／版本文件比对✅
Service Worker 更新通🈯️
后端响应头注入版本号（需要后端配合支持）
等等解决方案……

web 开发中，前端部署更新后，该怎么通知用户刷新

web 开发中，前端部署更新后，该怎么通知用户刷新？ 浏览器为什么存在刷新按钮？🔘 因为需要重新加载js，css，html。但为何需要重新加载这些东西？直白点说这些东西其实就是一个文档&…...

编程日记 2025/5/11 5:04:03

LaTex、pdfLaTex、XeLaTex和luaLaTex的区别和联系

之前一直搞不懂这些乱七八糟的Tex到底有啥区别，不同引擎不同编译器换来换去，查了些资料又问了下AI，总算是搞懂了。大概是这样，很久以前有人写了个Tex排版引擎，输入一些代码命令，输出dvi文件（设…...

编程日记 2025/5/11 5:04:02

深入解析 npm 与 Yarn：Node.js 包管理工具对比与选型指南

在 Node.js 生态中，依赖管理是项目开发的核心环节。npm（Node Package Manager）和 Yarn 作为两大主流包管理工具，虽目标一致但各有特色。本文将从技术实现、使用场景、生态整合等维度深度对比，助你选择更适合的工具。…...

编程日记 2025/5/11 5:04:11

PDF嵌入图片

所需依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itext-core</artifactId><version>9.0.0</version><type>pom</type> </dependency>源码 /*** PDF工具*/ public class PdfUtils {/*** 嵌入图…...

编程日记 2025/5/11 5:04:09

Coding Practice，48天强训（24）

Topic 1：判断是不是平衡二叉树（递归） 判断是不是平衡二叉树_牛客题霸_牛客网 /*** struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ /*** 代码中的类名、方法名、参数名已经指定，请勿修改&…...

编程日记 2025/5/11 5:03:59

技术分享 | Oracle-RAC修改IP信息

本文为墨天轮数据库管理服务团队第61期技术分享，内容原创，作者为技术顾问胡振兴，如需转载请联系小墨（VX：modb666）并注明来源。在生产中有时候会遇到网络变更，Oracle RAC IP信息更换等情况&…...

编程日记 2025/5/11 5:04:14

北京工业大学25计专上岸经验分享

1.个人情况介绍本科就读于河北双非，专业为计算机科学与技术，四级三次498，六级两次460，拿过几次校级奖学金，竞赛经历有蓝桥杯国三、数学竞赛省二。本科成绩排名靠前，保研保7排8，遗憾选择考研继…...

编程日记 2025/5/11 5:04:15

目录 1.查看集群状态 2.查看消息对列的堆积 3.重启mq服务 4.清理mq队列消息 1.查看集群状态 rabbitmqctl cluster_status 2.查看消息对列的堆积 rabbitmqctl list_queues rabbitmqctl list_queues | grep -v 0$ 3.重启mq服务 systemctl status rabbitmq-server.servic…...

编程日记 2025/5/28 9:34:51

Spring Cloud Alibaba 整合 Sentinel：实现微服务高可用防护

一、Sentinel 简介 Sentinel 是阿里巴巴开源的面向分布式服务架构的流量控制组件，主要提供以下核心功能： 流量控制：针对不同的调用关系，以不同的运行指标（如 QPS、线程数、系统负载等）为基准，对…...

编程日记 2025/5/11 5:04:06

机器人抓取位姿检测——GRCN训练及测试教程（Pytorch）

机器人抓取位姿检测——GRCN训练及测试教程（Pytorch）这篇文章主要介绍了2020年IROS提出的一种名为GRCN的检测模型，给出了代码各部分的说明，并给出windows系统下可以直接复现的完整代码，包含Cornell数据集。模型结构图 github源码地址：https://github.com/skumra/robo…...

编程日记 2025/5/31 16:45:18

《一键式江湖：Docker Compose中间件部署108式》开篇：告别“配置地狱”，从此笑傲云原生武林！》

（🗡️江湖险恶，少侠可曾受困？） 深夜🌙，你盯着屏幕泛红的终端报错，第3次从GitHub某个无名仓库扒下残缺的docker-compose.yaml， 却发现： RabbitMQ连不上&#…...

编程日记 2025/5/11 5:04:11

C语言内敛函数

目录 1、内敛函数的定义 2、内敛函数的特点 2.1 减少函数调用开销 2.2 代码膨胀 2.3 编译器决定 2.4 适用于小型函数 3、示例 4、注意事项在C语言中，内敛函数（Inline Function）是一种通过编译器优化来减少函数调用开销的机制。它通过…...

编程日记 2025/5/11 5:04:05

DAY8-GDB调试及打桩

GDB打桩 1.类成员函数打桩 // example1.cpp #include <iostream>class Calculator { public:int add(int a, int b) {return a b;} };int main() {Calculator calc;std::cout << "Result: " << calc.add(2, 3) << std::endl;return 0; }(…...

编程日记 2025/5/11 5:04:10

三、UI自动化测试03--操作方法API

目录一、元素操作⽅法二、浏览器操作⽅法1. Part1: 设置最⼤化/⼤⼩/位置扩展: Web/APP 项⽬⻚⾯布局坐标系示意2. Part2: 后退/前进/刷新3. Part3: 关闭/退出/获取⻚⾯标题和 URL 地址三、获取元素信息⽅法1. Part1: 获取⼤⼩/⽂本/属性值2. Part2: 判断元素是否可⻅/可⽤/可…...

编程日记 2025/5/11 5:04:05

人工智能—— K-means 聚类算法

目录摘要 16 K-means 聚类算法 16.1 本章工作任务 16.2 本章技能目标 16.3 本章简介 16.4 编程实战 16.5 本章总结 16.6 本章作业本章已完结！！！ 摘要本章实现的工作是：首先采用Python语言读取样本数据(学生的语文、数…...

编程日记 2025/5/11 5:04:03

使用XMLSpy校验xml是否合法

# 背景说明近期大部分地区都在做或将要做数据迁移，基本所有产品的迁移工具底层都依赖了XSD文件对迁移的结构化数据对应XML文件进行初步校验，但有些XSD的问题提示不太容易理解，正好N年前我做XX数据上报时用过XMLSpy可以直接校验每个xml是否合…...

编程日记 2025/5/11 5:04:03

游戏引擎学习第248天:清理数据块显示

启动代码，构建游戏，回顾并为今天的工作做好准备今天还需要做一些额外的调整。具体来说，我们希望能编辑一些调试值，而这个结构在当前的调试系统中已经有了，所以今天主要是清理一些无关的部分，并进行一些连…...

编程日记 2025/5/11 5:04:01

基于Pytest接口自动化的requests模块项目实战以及接口关联方法详解

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快 1、基于pytest单元测试框架的规则 1.1 模块名（即文件名）必须以test_开头或者_test结尾 1.2 类名必须以Test开头且不能有init方法 1.3 用…...

编程日记 2025/5/11 5:04:05

腾讯 Kuikly 正式开源，了解一下这个基于 Kotlin 的全平台框架

在 3月的时候通过《腾讯 TDF 即将开源 Kuikly 跨端框架，Kotlin 支持全平台》我们大致知道了 Kuikly 的基本情况，Kuikly 是一个面向终端技术栈的跨端开发框架，完全基于kotlin语言开发，提供原生的性能和体验。按照官方的说法&…...

编程日记 2025/5/11 5:03:59

【c++】AVL树模拟实现

简介 AVL树是最先被发明出来的自平衡二叉查找树，在1962由前苏联科学家G. M. Adelson-Velsky和E. M. Landis在论文中发表。AVL树中引入了平衡因子，每一个节点都有一个平衡因子（一般是右子树高度 - 左子树高度）；AVL树要…...

编程日记 2025/5/29 11:03:33

具身智能模型开发训练技法之仿真平台动捕数据重定向

具身智能大模型的开发与训练高度依赖大量的数据输入，形象地说，如同需要持续的“数据喂养”。只有经过不断地进行数据积累和模型训练，具身智能大模型才能够实现自主感知、自主决策以及自主执行的完整进程。在多样化的数据形态中，真…...

编程日记 2025/5/11 5:04:10

手撕——贪吃蛇小游戏（下）

引言上一章介绍了实现贪吃蛇小游戏必备的知识点。这章，让我们一起开启手搓核弹之旅吧。先附上贪吃蛇代码的git：贪吃蛇小游戏_4_23 Shown_shuai/learn_c - 码云 - 开源中国 (gitee.com) 上一章的窗口： 手撕——贪吃蛇小游戏&#xff0…...

编程日记 2025/6/4 12:41:28

C++ 类与对象（中）—— 默认成员函数与运算符重载的深度解析:构造函数,析构函数，拷贝构造函数，赋值运算符重载，普通取地址重载，const取地址重载

在 C 中，类的默认成员函数是编译器自动生成的重要机制，合理利用这些函数可以简化代码编写，同时避免资源管理错误。本文将从构造函数、析构函数、拷贝构造函数、赋值运算符重载等核心内容展开，结合具体案例深入解析。一、默认成员…...

编程日记 2025/6/2 20:37:05

【Jupyter 启动时如何指定目录】

你在 Windows 系统下运行 jupyter notebook 时，遇到了 Jupyter Notebook 打开的目录不是你想要的 E:\desktop\yolo-study，而是其他路径。这可能是由于 Jupyter 的默认配置问题或启动路径问题导致的。 🔍 原因分析 Jupyter 默认根目录设置错…...

编程日记 2025/5/11 5:04:02

PostSwigger Web 安全学习：CSRF漏洞2

CSRF 漏洞学习网站：What is CSRF (Cross-site request forgery)? Tutorial & Examples | Web Security Academy CSRF 漏洞：SameSite相关绕过当浏览器访问服务器时，服务器会在 Cookie 中添加 SameSite 属性来告诉浏览器是否在来自其他…...

编程日记 2025/5/11 5:04:02

openharmony—4.1 softbus_tool 工具编译使用测试笔记（持续更新）

相关资料： 1.communication_dsoftbus: 暂无描述 - Gitee.com 2.dsoftbus_tool: OpenHarmony 分布式软总线样例 3.OpenAtom OpenHarmony 4.OpenAtom OpenHarmony 编译该demo之前需要大家搭建拉取openharmony源码，搭建开发环境，同时全…...

编程日记 2025/5/11 5:04:04

关于 Web 服务器的五个案例

一、案例题目： 1.多 IP 访问多网站（在 RHCE 练习二中的实验二） 2.多端口访问多网站 3.多域名访问多网站 4.虚拟目录和用户控制 5.https/443 二、案例实验 2.多端口访问多网站 ① 开始还是先关闭我们的防火墙以及 selinux [rootserve…...

编程日记 2025/5/11 5:04:07

第十二章-PHP文件上传

第十二章-PHP文件上传一，文件上传原理一、HTTP协议与文件上传 1. 请求体结构当表单设置enctype"multipart/form-data"时，浏览器会将表单数据编码为多部分（multipart）格式。 Boundary分隔符：随机生成的…...

编程日记 2025/5/11 5:04:14

shell脚本部署disu博客

#!/bin/bash #关闭防火墙 systemctl status firewalld &>/dev/null if [ $? -ne 0 ];then systemctl stop firewalld &>/dev/null else echo “firewalld is disabled” fi #关闭selinux filegetenforce if [ “$fine” “Disabled” ];then echo “firewalld…...

编程日记 2025/5/22 2:10:56

NdrpPointerUnmarshallInternal函数分析之pFormatPointee指针的确定

第一部分： 0: kd> p RPCRT4!NdrPointerUnmarshall0x29: 001b:77c46ce4 e8b6f6ffff call RPCRT4!NdrpPointerUnmarshall (77c4639f) 0: kd> t Breakpoint 4 hit RPCRT4!NdrpPointerUnmarshall: 001b:77c4639f 55 push ebp 0: kd> …...

编程日记 2025/5/11 5:04:08

STM32（M4）入门：定时器延时与系统滴答（价值 3w + 的嵌入式开发指南）

第 1 章延时：嵌入式系统的时间控制基石 1.1 延时基础：从概念到硬件实现 1.1.1 什么是延时？ 定义：延时是通过软件或硬件手段，使程序执行过程中暂停指定时间，再继续后续操作的技术。本质是对时间的精确或…...

编程日记 2025/5/11 5:04:04

2025 FIC wp

这次比赛计算机和手机大部分题目都比较常规第一和第四部分有点让人摸不着头脑比赛的时候第一部分有四个题没出第四部分基本都没怎么出现在复盘一下把我当时做题的心得和获取的新知识记录一下互联网取证的部分就先学习一下别的师傅检材链接：https://pan.bai…...

编程日记 2025/5/29 20:55:36

STM32标准库和HAL库SPI发送数据的区别-即SPI_I2S_SendData()和HAL_SPI_Transmit()互换

1、标准库SPI初始化这是标准库的SPI初始化配置 2、HAL库SPI初始化这是HAL库函数的SPI初始化配置可以看出，基本一直，除了基本的io口配置区别，其他主要的读写函数不用动的。 3、SPI发送函数_替换对比 /* SPI写入一个字节 */ void SP…...

编程日记 2025/5/26 6:21:21

Cesium 三维场景中通过自定义着色器实现多种特效（纹理、光带、点光源、反射）

整体功能概述构建一个基于 Cesium 的三维场景，加载三维瓦片集模型，同时提供多种特效，像夜景纹理、上下扫光、点光源以及反射纹理等，利用 dat.gui 库创建交互界面。代码详解白膜特效 nightFs.glsl void fragmentMain(Fragm…...

编程日记 2025/5/18 10:18:32

Java学习--HashMap

HaspMap是Java集合框架中最重要、最常用的数据结构之一。其基于哈希表实现了Map接口，在Java1.8的版本中，其采用了“数组链表红黑树”的混合结构，底层代码如下： transient Node<K,V>[] table; // 哈希桶数组 static class N…...

编程日记 2025/5/13 2:02:48

Monorepo、Lerna、Yarn Workspaces、pnpm Workspaces 用法

Monorepo 介绍 Monorepo是一种方案，而非具体的工具。 Monorepo指的是将多个相关的项目或模块放在同一个代码仓库中进行管理的方式。这种方案有以下优点： 方便代码共享：不同项目或模块之间可以方便地共享代码、组件、工具函数等&#xff0c…...

编程日记 2025/5/24 8:05:55

JVM指令手册：深入理解字节码执行机制

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取引言 Java虚拟机（JVM）作为Java生态的核心执行引擎，其指令系统是理解程序底层运行机制的关键。本手册将系统解析JVM指令集…...

编程日记 2025/5/31 12:30:32

springboot logback 默认加载配置文件顺序

在 Spring Boot 应用中，Logback 默认加载配置文件的顺序遵循特定的规则。以下是详细的加载顺序和优先级说明： 1. 默认配置文件加载顺序 Logback 在 Spring Boot 中会按以下顺序查找并加载配置文件（优先级从高到低）： l…...

编程日记 2025/5/29 13:06:48

用 Nodemon 解决 npm run serve 频繁重启服务

Nodemon 是一个基于 Node.js 构建的开发工具，专为帮助开发者自动监控项目文件的更改而设计。每当文件发生变更时，Nodemon 会自动重启 Node.js 服务器，无需手动停止并重启。这对于提升开发速度、减少人工操作非常有帮助，尤其适用于…...

编程日记 2025/5/30 19:05:12

WEB安全--社会工程--SET钓鱼网站

1、选择要钓鱼的网站 2、打开kali中的set 3、启动后依次选择： 4、输入钓鱼主机的地址（kali）和要伪装的网站域名： 5、投放钓鱼网页（服务器域名:80） 6、获取账号密码...

编程日记 2025/5/29 9:57:35

系统架构师---基于规则的系统架构

引言在业务规则高度动态且需快速响应的系统中，‌基于规则的系统架构风格（Rule-Based System Architecture Style）‌提供了一种将业务逻辑与代码解耦的标准化范式。从保险理赔的自动化审核到金融风控的实时拦截，规则引擎已成为企…...

编程日记 2025/5/21 8:48:10

嵌入式软件--stm32 DAY 4 中断系统

1.课后练习学了这么长时间，现在让我们第一次做练习。 1.1往返流水灯 1.1.1 LED1-LED2-LED3-LED2-LED1循环 （1）工程准备复制上一个寄存器实现的工程文档，删减修改我们正要实现的工程。为了区别练习和学习工程，我们…...

编程日记 2025/5/23 21:57:52

android开发制作aosp系统签名文件给普通apk签名使用

platform.pk8和platform.x509.pem复制出来放在同一目录下将AOSP源码路径下build\target\product\security\platform.pk8和platform.x509.pem复制出来放在同一目录下新开一个ternimal窗口执行下面命令，生成platform.pem文件 openssl pkcs8 -in platform.pk8 -info…...

编程日记 2025/5/29 12:33:58

AVL树的介绍与学习

目录 1.前言 2.AVL树 3.AVL树的插入平衡因子的更新更新停止的条件旋转 1.前言在学习了二叉搜索树，set和map之后，我们接下来趁热打铁，继续学习AVL树。 2.AVL树 1.AVL树具有二叉搜索树的性质，但是它的左右子树的高度差不…...

编程日记 2025/6/1 20:58:39

docker部署Mysql8一直密码错误记录

正常流程是这样得： 第一步 #拉镜像 docker pull mysql:8.0 第二步 #运行名为 mysql8 得容器 ，MYSQL_ROOT_PASSWORD123456 设置密码 docker run -p 3307:3306 \ --name mysql8 \ -e MYSQL_ROOT_PASSWORD123456 \ -v /docker/mysql8/data:/var/lib/m…...

编程日记 2025/5/29 0:58:01

智慧水库与AI深度融合的实现方案及典型应用场景

以下是智慧水库与AI深度融合的实现方案及典型应用场景，结合行业前沿案例与技术架构展开：一、智慧水库AI实现方案 1. 技术架构与核心工具感知层：多模态传感器网络：部署毫米波雷达水位计（精度3mm）、光纤光栅渗压计（分辨率0.01%FS）、高清智能球机（支持800万像素+AI分…...

编程日记 2025/5/15 19:24:22

大语言模型架构基础与挑战

大语言模型（Large Language Model, LLM）在近几年引领了自然语言处理领域的革命性进展。这类模型通常拥有极其庞大的参数规模（往往达到数十亿乃至数千亿级别），通过对海量文本数据进行自监督训练，展现出卓越的语言理解和生成能力。自2018年前后第一批大语言模型问世以来，基…...

编程日记 2025/6/3 13:18:27

KAG：通过知识增强生成提升专业领域的大型语言模型（二）

目录摘要 Abstract 1 实验 1.1 实验设置 1.2 总体结果 1.3 消融研究 1.3.1 知识图谱索引消融 1.3.2 推理与检索消融 1.3.3 实验结果与讨论 2 KAG服务部署 2.1 安装Docker 2.2 安装Doker Compose 2.3 启动服务 2.4 查看状态 2.5 产品访问 3 KAG 0.6使用&#x…...

编程日记 2025/5/12 14:48:51

【Luogu】动态规划六

P1586 四方定理 - 洛谷思路： 这题其实就是完全背包问题，但是有限制，最多数量只能是 4 所以我们可以定义 dp[i][j] 为 i 用 j 个数拼凑的总方案数那么转移方程也很明显了，dp[i][j] dp[i - k*k][j - 1] 具体的，我…...

编程日记 2025/5/29 9:31:22

Postman接口测试: postman设置接口关联，实现参数化

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快 postman设置接口关联在实际的接口测试中，后一个接口经常需要用到前一个接口返回的结果， 从而让后一个接口能正常执行，这个…...

编程日记 2025/5/29 20:24:58

web 开发中，前端部署更新后，该怎么通知用户刷新？

相关文章：