Vue3实现优雅的前端版本更新提示

背景

在前端项目开发中,当我们发布了新版本后,需要及时通知用户刷新页面以获取最新代码。本文将介绍一种优雅的实现方案。

实现原理

在项目根目录维护一个version.json文件,记录当前版本号
前端定期请求version.json检查版本
对比本地存储的版本号,如有更新则提示用户

核心代码实现

1. 创建version.json

复制代码

{
"version": "1.0.0"
}

2. Vue组件实现

复制代码

import { ref, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
// 检查版本更新
const checkVersion = async () => {
try {
// 添加时间戳防止缓存
const response = await fetch('/version.json?t=' + new Date().getTime())
const data = await response.json()
const localVersion = localStorage.getItem('app_version')
if (localVersion && localVersion !== data.version) {
showUpdateNotification()
}
localStorage.setItem('app_version', data.version)
} catch (error) {
console.error('检查版本更新失败:', error)
}
}
// 显示更新通知
const showUpdateNotification = () => {
ElNotification({
title: '系统更新提示',
message: '系统已更新,请刷新页面获取最新版本',
type: 'warning',
duration: 0,
onClick: () => window.location.reload()
})
}
// 组件挂载时初始化
onMounted(() => {
localStorage.removeItem('app_version') // 清除本地版本号
checkVersion() // 初始检查
setInterval(checkVersion, 1 60 1000) // 每分钟检查一次
})

实现要点

防止缓存: 请求version.json时添加时间戳参数
定时检查: 使用setInterval定期检查版本更新
用户体验:
- 通知框持续显示(duration: 0)
- 点击通知可直接刷新
- 友好的提示文案
版本号存储: 使用localStorage存储版本号,便于对比

优化建议

可以根据业务需求调整检查频率
可以添加更新日志展示
对于正在编辑的内容,建议提示用户先保存
可以添加强制更新的机制