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

背景

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

实现原理

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

核心代码实现

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) // 每分钟检查一次
})

实现要点

  1. 防止缓存: 请求version.json时添加时间戳参数

  2. 定时检查: 使用setInterval定期检查版本更新

  3. 用户体验:

    • 通知框持续显示(duration: 0)
    • 点击通知可直接刷新
    • 友好的提示文案
  4. 版本号存储: 使用localStorage存储版本号,便于对比

优化建议

  1. 可以根据业务需求调整检查频率

  2. 可以添加更新日志展示

  3. 对于正在编辑的内容,建议提示用户先保存

  4. 可以添加强制更新的机制

相关推荐
祝余呀9 分钟前
HTML初学者第三天
前端·html
就爱瞎逛25 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81628 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者42 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端