Vite版本更新检查实现页面自动刷新的解决思路
作者:Naomi_233 发布时间:2024-04-27 16:17:07
前端版本更新检查,实现页面自动刷新
使用vite
对项目进行打包,对 js 和 css 文件使用了 chunkhash 进行了文件缓存控制,但是项目的index.html
文件在版本频繁迭代更新时,会存在被浏览器缓存的情况。
在发版后,如果用户不强制刷新页面,浏览器会使用旧的index.html
文件,在跳转页面时会向服务器端请求了上个版本 chunkhash 的 js 和 css 文件,但此时的文件已经在版本更新时已替换删除了,最终表现为页面卡顿,控制台报错 404。
解决思路
思路 1
服务器端发版时,上一个版本的assets
内的文件不删除。
缺点是会随着频繁发版,服务器端前端项目文件会越来越多,浪费空间;若旧页面的接口涉及到参数改动等,会引起报错;流水线使用 docker 打包部署会变得非常麻烦。
思路 2
在每次打包生产代码时,在public
下生成一个version.json
版本信息文件,页面跳转时请求服务器端的version.json
中的版本号和浏览器本地缓存的版本号进行对比,从而监控版本迭代更新,实现页面自动更新,获取新的index.html
文件(前提是服务器端对index.html
进行不缓存配置)。
1.首先应该禁止浏览器缓存index.html
和version.json
,这里实现nginx
的不缓存处理
添加nginx
配置
location ~ .*\.(htm|html|json)?$ { expires -1;}
2.使用Vite 插件打包时自动生成版本信息
版本信息插件
// versionUpdatePlugin.js
const fs = require('fs')
const path = require('path')
const writeVersion = (versionFile, content) => {
// 写入文件
fs.writeFile(versionFile, content, (err) => {
if (err) throw err
})
}
export default (options) => {
let config
return {
name: 'version-update',
configResolved(resolvedConfig) {
// 存储最终解析的配置
config = resolvedConfig
},
buildStart() {
// 生成版本信息文件路径
const file = config.publicDir + path.sep + 'version.json'
// 这里使用编译时间作为版本信息
const content = JSON.stringify({ version: options.version })
if (fs.existsSync(config.publicDir)) {
writeVersion(file, content)
} else {
fs.mkdir(config.publicDir, (err) => {
if (err) throw err
writeVersion(file, content)
})
}
},
}
}
vite 配置文件
// vite.config.js
export default defineConfig((config) => {
const now = new Date().getTime()
return {
...
define: {
// 定义全局变量
__APP_VERSION__: now,
},
plugins: [
...
versionUpdatePlugin({
version: now,
}),
],
...
}
})
3.路由跳转时,实时检测版本
检测到新版本自动刷新页面,应该使用前置守卫,在跳转失败报错前检测,跳转失败不会触发后置守卫
const router = useRouter()
// 这里在路由全局前置守卫中检查版本
router.beforeEach(async () => {
await versionCheck()
})
// 版本监控
const versionCheck = async () => {
if (import.meta.env === 'development') return
const response = await axios.get('version.json')
// eslint-disable-next-line no-undef
if (__APP_VERSION__ !== response.data.version) {
// eslint-disable-next-line no-undef
ElMessage({
message: '发现新内容,自动更新中...',
type: 'success',
showClose: true,
duration: 1500,
onClose: () => {
window.location.reload()
},
})
}
}
来源:https://blog.csdn.net/qwe134133987/article/details/127979312
猜你喜欢
- 前言本章介绍pandas中的缺失数据,主要内容有:pandas中对np.nan的操作: 统计 、 删除 、 填充 、 插值 pan
- HTML 5 和 XHTML 2规范草稿公布以来,一直存在很大的争议。HTML 5是由包括Google、Mirosoft、Mozilla、O
- 本文实例讲述了JS实现选项卡的方法。分享给大家供大家参考,具体如下:思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过dis
- 内存管理:概述在Python中,内存管理涉及到一个包含所有Python对象和数据结构的私有堆(heap). 这个私有堆的管理由内部的Pyth
- 前言为了往我们写好的Python代码传入参数,有很多种方法,比如使用input获取从DOS 输入的参数,又或者读取txt 文件中的字符作为参
- 今天我们来学习,如何使用有趣的自定义标记来布局页面。有的朋友可能有这样的疑问,自己随便定义的标记浏览器怎么能正确的认识呢?这里我们就要用到文
- 关于如何区分艺术和设计的话题总是玄之又玄,并因此引发的争论也有很长一段时间。艺术家和设计师都基于相同的知识基础来创作视觉作品,但他们创作的理
- 一、实验内容 对于下面这幅图像,编程实现染色体计数,并附简要处理流程说明。二、实验步骤1.中值滤波2.图像二值化3.膨胀图像4.腐
- mysql-5.7以后压缩包安装有了不小的变化,本文针对之前安装mysql5.7.18的笔记进行了总结,分享给大家第一步:到官网下载http
- 示例:《电影类型分类》获取数据来源电影名称打斗次数接吻次数电影类型California Man3104RomanceHe's Not
- 采集开始第一步是分析要采集的页面。使用浏览器打开要采集的页面(如:http://sports.sina.com.cn/k/2008-09-1
- os.path.dirname() 获取父目录os.path.basename() #获取文件名或者文件夹名python2缺省为相对路径导入
- 最近一句话后门不断升级大家注意防范,基本上多事字符替换过护卫神PHP一句话作者:小东 <?php $a = str_replace(x
- Scipy高级科学计算库:和Numpy联系很密切,Scipy一般都是操控Numpy数组来进行科学计算、统计分析,所以可以说是基于Numpy之
- 前几天有个人退群了。起因很简单,他问了一个问题,没人回答,于是说要退群,后来我看到了,给了个链接,说这个问题已经说过好多遍了,于是他就退了。
- 目录前后端传输数据的编码格式Ajax提交urlencoded格式数据Ajax通过FormData上传文件Ajax提交Json格式数据Ajax
- 这里主要是解决multipart/form-data这种格式的文件上传,基本现在http协议上传文件基本上都是通过这种格式上传1 思路一般情
- 环境准备创建QQ互联应用创建一个QQ互联应用,并获取到App ID和App Key。QQ互联官网:https://connect.qq.co
- 目录1.触发器是什么?2.创建触发器创建触发器的语法如下:创建多个执行语句的触发器: NEW和OLD的使用:3.使用触发器1.触发
- 数据采集我们上一篇介绍了,如何采集王者最低战力,本文就来给大家介绍如何采集王者皮肤,买不起皮肤,当个桌面壁纸挺好的。下面,我和大家介绍如何获