前端项目部署后,需要刷新页面才能看到更新内容

问题背景

前端项目部署更新后,通知业务验证,业务点击收藏的标签,打开网页后没有看到修改的内容,每次都需要手动刷新,用户体验非常不好。

问题原因:缓存未过期,浏览器直接读取本地缓存,而未从服务器请求新的资源,如下所示。

请求方法: GET
状态代码: 200 OK (来自磁盘缓存)

解决方法

在 build 目录下创建 generate.js,目的是每次打包时在 public 目录下生成 app-version.json 文件

// /build/version/generate.jsconst fs = require('fs')
const path = require('path')module.exports = function generateAppVersion(appVersion) {try {let obj = {appVersion: String(appVersion)}fs.writeFileSync(path.resolve('public/app-version.json'), JSON.stringify(obj))} catch (error) {console.error(error)}
}

在 vue.config.js 中调用 version.js

const generateAppVersion = require('./build/version/generate.js')
const timestamp = Date.now()
generateAppVersion(timestamp)

执行 npm run build,可以看到 public 中多了 app-version.json 文件

{"appVersion":"1698742226172"}

src 文件下创建 version.js,在 main.js 中 import 引入,进行新旧版对比并刷新浏览器。

import axios from 'axios'async function compare() {let last = window.localStorage.getItem('app_version') // 旧版本let current = await queryVersion() // 新版本if(!last) {setVersion(current)}if(last && last != current) { // 新旧版本不一样setVersion(current)window.location.reload() // 自动刷新浏览器}
}function setVersion(version) {window.localStorage.setItem('app_version', version)
}/*** 请求新版本* @returns */
async function queryVersion() {return axios.get(window.location.origin + window.location.pathname + './app-version.json?r=' + Math.random()).then(({data}) => {return data.appVersion})
}compare()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/125596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# WPF: Imag图片填充方式有哪些?

C#和WPF中的图像填充方式 在WPF中,你可以使用Image控件来显示图像,并使用不同的填充方式来控制图像在控件中的显示方式。以下是一些常见的图像填充方式: Stretch(拉伸):这是默认的填充方式,它…

MySQL数据库的存储引擎,底层存储结构,事物隔离级别,索引,日志等

存储引擎 存储引擎就是存储数据、建立索引、更新/查询数据等技术的实现方式。存储引擎是基于表而不是基于库的,所以存储引擎也可以被称为表引擎。 默认存储引擎是InnoDB。 InnoDB 在 MySQL 5.5 之后,InnoDB 是默认的 MySQL 引擎。 1.支持事务 2.行级锁…

idea中Run/Debug Python项目报错 Argument for @NotNull parameter ‘module‘ of ...

idea中Run/Debug Python项目报错 Argument for NotNull parameter module of ... idea中运行Python项目main.py时报错: Error running main: Argument for NotNull parameter module of com/intellij/openapi/roots/ModuleRootManager.getInstance must not be nu…

C++ 对象数组(整理)

C对象数组 一、对象数组的定义二、对象数组的特性三、对象数组的使用3.1 构造函数没有参数3.2 构造函数有一个参数3.3 构造函数有多个参数 四、为什么要使用对象数组? 一、对象数组的定义 所谓对象数组,指每一个数组元素都是对象的数组,即若…

Vue进阶(幺陆玖)项目部署后IE报 SCRIPT1002:语法错误 解决方案探讨

文章目录 一、前言二、组件懒加载2.1 什么是懒加载2.2 如何实现懒加载 三、延伸阅读 软件程序唤醒3.1 protocolCheck 实现3.2 自定义实现 四、拓展阅读 一、前言 Vue项目改造升级后,原本本地热部署后IE可正常打开的项目出现页面白屏且控制台给出SCRIPT1002:语法错误…

[量化投资-学习笔记004]Python+TDengine从零开始搭建量化分析平台-EMA均线

在之前的文章中用 Python 直接计算的 MA 均线,但面对 EMA 我认怂了。 PythonTDengine从零开始搭建量化分析平台-MA均线的多种实现方式 高数是我们在大学唯一挂过的科。这次直接使用 Pandas 库的 DataFrame.ewm 函数,便捷又省事。 并且用 Pandas 直接对之…

谷歌财报解读:基本盘守成有余,云业务进取不足?

科技巨头的AI之战持续上演,而财报季是一窥AI成色的重要窗口。 谷歌和微软这对在多个领域均正面对决的科技巨头,又在同一日发布了财报,而这次相比上季度,战局似乎迎来了反转。 上季度,谷歌不仅成功抵御了Bing联手ChatG…

【uniapp】uview1.x使用upload上传图片

和2.x不同的是,要用 action 来配置后端上传图片的接口地址; 再来一些配置项的命名有所不同,一般1.x的命名用 -,2.x的命名使用小驼峰; 1.x 的上传会自带删除时的提示框,2.x 没有; 重要的几个配置…

Centos如何安装Mysql

1、安装前检查是否存在mysql yum list installed mysql* ①如或显示了列表,说明系统中有MySQL **yum卸载 ** 根据列表上的名字([中括号为可选项]) yum remove [填写列表显示出来的所有内容] rm -rf /var/lib/mysql rm /etc/my.cnf②rpm查…

【Qt之QLocale】使用

描述 QLocale类可以在多种语言之间进行数字和字符串的转换。 QLocale类在构造函数中使用语言/国家对进行初始化,并提供类似于QString中的数字转字符串和字符串转数字的转换函数。 示例: QLocale egyptian(QLocale::Arabic, QLocale::Egypt);QString s1 …

证照之星XE专业版下载专业证件照制作工具

值得肯定的是智能背景替换功能,轻松解决背景处理这一世界难题。不得不提及的是新增打印字体设置,包含字体选择、字号大小、字体颜色等。不同领域的应用证明了万能制作,系统支持自定义证照规格,并预设了17种常用的证件照规格。人所…

c语言练习(9周)

输入样例11输出样例7.0980 #include<stdio.h> int main() {int n, i;double s 1,a1;scanf("%d", &n);for (i 2; i < n; i) {a 1 / (1a);s a;}printf("%.4lf", s);return 0; } 题干输入10个整数&#xff0c;分别按输入正序、逆序显示。输…

【CSDN 每日一练 ★★☆】【DSF/BSF】岛屿数量

【CSDN 每日一练 ★★☆】【DSF/BSF】岛屿数量 深度遍历 宽度遍历 题目 给你一个由1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖…

2021-arxiv-LoRA Low-Rank Adaptation of Large Language Models

2021-arxiv-LoRA Low-Rank Adaptation of Large Language Models Paper: https://arxiv.org/abs/2106.09685 Code: https://github.com/microsoft/LoRA 大型语言模型的LoRA低秩自适应 自然语言处理的一个重要范式包括对通用领域数据的大规模预训练和对特定任务或领域的适应。…

IOI车机系统刷机和改包笔记2 - 改包脚本

前言&#xff1a; 最近对雪佛兰改包需求感兴趣的网友很多&#xff0c;大家都遇上了很多奇怪的问题&#xff0c;这里就我自己使用的环境和脚本进行分享&#xff0c;供大家参考。 1. 准备环境 我这里使用Ubuntu系统进行操作 andyandy-vm:~$ sudo lsb_release -a No LSB module…

iZotope RX 10(音频修复和增强工具)

iZotope RX 10是一款音频修复和增强软件&#xff0c;主要特点包括&#xff1a; 声音修复&#xff1a;iZotope RX 10可以去除不良噪音、杂音、吱吱声等&#xff0c;使音频变得更加清晰干净。音频增强&#xff1a;iZotope RX 10支持对音频进行音量调节、均衡器、压缩器、限制器等…

如何在【逻辑回归】中优化控制正则化程度的超参数C

一.逻辑回归基本介绍 逻辑回归也称作logistic回归&#xff0c;是一种广义的线性回归分析模型&#xff0c;主要是用来解决二分类问题&#xff08;也可以解决多分类问题&#xff09;。通过训练集来训练模型&#xff0c;并在训练结束后对测试集进行分类。 通过激活函数&…

杂货铺 | 报错记录(持续更新)

文章目录 ⚠️python SyntaxError: Non-UTF-8 code starting with ‘\xb3‘ in file⚠️partially initialized module ‘‘ has no attribute ‘‘(most likely due to a circular import)⚠️AttributeError: ‘DataFrame‘ object has no attribute ‘append‘ ⚠️python S…

Flink CDC 2.0 主要是借鉴 DBLog 算法

DBLog 算法原理 DBLog 这个算法的原理分成两个部分&#xff0c;第一部分是分 chunk&#xff0c;第二部分是读 chunk。分 chunk 就是把一张表分为多个 chunk&#xff08;桶/片&#xff09;。我可以把这些 chunk 分发给不同的并发的 task 去做。例如&#xff1a;有 reader1 和 re…

springboot是如何工作的

一、前言 现在java后端开发框架比较多的使用springboot框架&#xff0c;springboot是在以前的springMVC进行封装和优化&#xff0c;最大的特点是简化了配置和内置Tomcat。本节通过阅读源码理解springboot是如何工作的。 二、springboot是如何工作的 1、从启动类开始 /***服务…