思路
可以检测build_time，也就是打包时间，每次打包的 时候都设置一个build-time，然后去比对上次和这次的时间，不一样就刷新
步骤
- 配置构建时间，在
vite.config.ts中使用dayjs获取当前时间，并将其赋值给BUILD_TIME和import.meta.env.VITE_BUILD_TIME
import dayjs from 'dayjs';const buildTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
export default defineConfig(configEnv => {
其他代码....
return {其他代码...define: {BUILD_TIME: JSON.stringify(buildTime),'import.meta.env.VITE_BUILD_TIME': JSON.stringify(buildTime)},其他代码...}
其他代码...
}
- 在 index.html 添加构建时间变量
%VITE_BUILD_TIME%
<!doctype html>
<html lang="zh-cmn-Hans"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.svg" /><meta name="build-time" content="%VITE_BUILD_TIME%" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>%VITE_APP_TITLE%</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>
- 编写检测更新的函数
- 创建 updateChecker.ts，设置定时器定期检查当前页面的构建时间，并与旧的构建时间进行比较。
- 如果检测到新版本，弹出对话框提醒用户刷新。
import { NDialogProvider, useDialog } from 'naive-ui';
import { createApp, h, nextTick } from 'vue';export const updateChecker = (onUpdate: (currentVersion: string, newVersion: string) => void,interval: number = 30 * 1000
) => {let timer: NodeJS.Timeout | null = null;async function check() {try {const response = await fetch(window.location.origin, {cache: 'no-cache',headers: {Pragma: 'no-cache','Cache-Control': 'no-cache'}});const text = await response.text();const parser = new DOMParser();const doc = parser.parseFromString(text, 'text/html');const newBuildTime = doc.querySelector('meta[name="build-time"]')?.getAttribute('content');const oldBuildTime = BUILD_TIME;if (newBuildTime && oldBuildTime && newBuildTime !== oldBuildTime) {console.log('可能检测到新版本，准备对比大小...', oldBuildTime, newBuildTime);const newTime = new Date(newBuildTime).getTime();const oldTime = new Date(oldBuildTime).getTime();if (newTime > oldTime) {console.log('检测到新版本，自动刷新...', oldBuildTime, newBuildTime);onUpdate?.(oldBuildTime, newBuildTime);}}} catch (error) {console.error('构建时间检测失败', error);}}return {start() {this.stop();timer = setInterval(check, interval);},stop() {if (timer) clearInterval(timer);},forceCheck() {check();}};
};let isDialogShown = false; // 添加标记来追踪对话框是否已显示
export const checker = updateChecker((oldBuildTime, newBuildTime) => {console.log('Page updated, Please click to refresh.');async function initDialog() {// 创建一个临时的 Vue 应用来使用 naive-ui 的 dialogconst container = document.createElement('div');let app: any;// 创建一个组件来显示对话框const DialogContent = {setup() {const dialog = useDialog();// 使用 nextTick 确保在下一个 tick 显示对话框nextTick(() => {dialog.warning({title: '发现新版本',content: `系统检测到新版本，请立即刷新页面！\n当前版本：${oldBuildTime}\n新版本：${newBuildTime}`,positiveText: '立即刷新',// negativeText: '稍后再说',onPositiveClick: () => {// 清理：当对话框关闭时移除临时容器app.unmount();container.remove();isDialogShown = false;location.reload();},// onClose: () => {// // 清理：当对话框关闭时移除临时容器// app.unmount();// container.remove();// },closable: false,maskClosable: false});});return () => null;}};app = createApp({render() {return h(NDialogProvider, null, {default: () => h(DialogContent)});}});app.component('NDialogProvider', NDialogProvider);document.body.appendChild(container);app.mount(container);isDialogShown = true; // 设置标记}// 添加一个对话框，让用户知道刷新if (!isDialogShown) {initDialog();}// location.reload();
}, 30 * 1000);- 在
main.ts中调用更新检测器
- 在 Vue 应用的初始化中调用 checker.start()，以开始定期检测版本更新
import { createApp } from 'vue';
import './plugins/assets';
import { setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
import { setupStore } from './store';
import { setupRouter } from './router';
import { setupI18n } from './locales';
import App from './App.vue';
import { lowPriorityAsyncCall } from './utils/common';
import { checker } from './utils/updateChecker';
// 这个 降低优先级的方法可以写在另一个通用方法文件里
export const lowPriorityAsyncCall = (fn: () => void) => {let callFn: (fn: () => void) => void;if ('requestIdleCallback' in window) {callFn = requestIdleCallback;} else {callFn = setTimeout;}callFn(fn);
};async function setupApp() {setupLoading();setupNProgress();setupIconifyOffline();setupDayjs();const app = createApp(App);setupStore(app);await setupRouter(app);setupI18n(app);
// 重点是这里lowPriorityAsyncCall(() => {if (!import.meta.env.DEV) {// 本地开发规避打扰checker.start();}});app.mount('#app');
}setupApp();
