Vite版本更新检查实现页面自动刷新的解决思路

这篇文章主要给大家介绍了关于Vite版本更新检查实现页面自动刷新的解决思路,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前端版本更新检查，实现页面自动刷新

使用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() }, }) } }