自动刷新更新

1. 创建脚本，生成version.json 保存新版本号

import fs from "fs"
import path from "path"
import { fileURLToPath } from "url"

const __filename = fileURLToPath(import.meta.url)

const __dirname = path.dirname(__filename)

// 生成版本信息：时间戳 + 格式化日期时间

const version = {
	version: Date.now().toString(),
	buildTime: new Date().toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" }),
	commitHash: process.env.commitHash || "unknown",
}

// 写入到public 目录

const publicDir = path.resolve(__dirname, "../public")
if (!fs.existsSync(publicDir)) {
	fs.mkdirSync(publicDir, { recursive: true })
}

fs.writeFileSync(path.resolve(publicDir, "version.json"), JSON.stringify(version, null, 2))

console.log(`版本已生成 ${version.buildTime} ${version.version}`)

"scripts": {
    "dev": "vite ",
    "build": "node scripts/generate-version.js && vite build ",
    "preview": "vite preview"
},

2.轮询判断版本号

// composables/useVersionCheck.js
import { ref, onMounted, onUnmounted } from "vue"
export function useVersionCheck(options = {}) {
	const {
		interval = 60000, // 轮询间隔，默认60秒
		immediate = true, // 是否立即开始检测
		showNotification = true, // 是否显示通知
		autoReloadDelay = 3000, // 自动刷新延迟（毫秒）
	} = options

	const currentVersion = ref(null)
	const isChecking = ref(false)
	const isRefreshing = ref(false)
	const hasUpdate = ref(false)
	let timer = null

	// 获取最新版本信息
	const fetchVersion = async () => {
		try {
			// 添加时间戳防止缓存
			const url = `/version.json?t=${Date.now()}`

			const response = await fetch(url, {
				cache: "no-cache",
				headers: {
					"Cache-Control": "no-cache",
					Pragma: "no-cache",
				},
			})

			if (!response.ok) {
				throw new Error(`HTTP ${response.status}`)
			}

			const data = await response.json()

			return data.version
		} catch (error) {
			console.warn("[版本检测] 获取版本失败:", error)
			return null
		}
	}

	// 轮询检查
	const startChecking = () => {
		if (timer) return

		timer = setInterval(() => {
			if (document.visibilityState === "visible") {
				checkVersion()
			}
		}, 10000)
	}

	// 检查版本更新
	const checkVersion = async () => {
		console.log("轮询")

		if (isChecking.value || isRefreshing.value) return

		isChecking.value = true

		try {
			const newVersion = await fetchVersion()

			if (!newVersion) return

			//首次获取版本
			if (!currentVersion.value) {
				currentVersion.value = newVersion

				console.log("版本检测", currentVersion.value)

				return
			}

			// 版本对比

			if (currentVersion.value !== newVersion && !hasUpdate.value) {
				console.log("版本检测", {
					old: currentVersion.value,
					new: newVersion,
				})

				hasUpdate.value = true

				currentVersion.value = newVersion

				// 自动刷新
				console.log("我要开始刷新")
				setTimeout(() => {
					window.location.reload()
				}, 3000)
			}
		} catch (error) {
			console.error("版本检测失败", error)
		} finally {
			isChecking.value = false
		}
	}

	// 监听页面可见性变化
	const handleVisibilityChange = () => {
		if (document.visibilityState === "visible" && timer && !hasUpdate.value) {
			// 页面重新可见时立即检测一次

			checkVersion()
		}
	}

	onMounted(() => {
		document.addEventListener("visibilitychange", handleVisibilityChange)
	})

	onUnmounted(() => {
		document.removeEventListener("visibilitychange", handleVisibilityChange)
		clearInterval(timer)
	})

	return {
		startChecking,
	}
}

3.使用

import { useVersionCheck } from "./composables/useVersionCheck"

const { startChecking } = useVersionCheck()

startChecking()