Vue 前端版本更新提示，通知用户刷新UI

前端更新程序后，通知用户刷新UI

1. 在 public 目录下 创建 version.json

{
"version": "1.0.0"
}

2. src\App.vue 文件中添加如下代码

<script setup lang="ts">// 检查版本更新
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(),onClose: () => window.location.reload(),});
};
// 组件挂载时初始化
onMounted(() => {localStorage.removeItem("app_version"); // 清除本地版本号checkVersion(); // 初始检查setInterval(checkVersion, 60000); // 每分钟检查一次
});
</script>