添加版本检查功能

This commit is contained in:
tianfeng 2025-08-20 18:06:24 +08:00
parent 6dd08874a6
commit 824b3ce67c
6 changed files with 114 additions and 3 deletions

10
.env
View File

@ -1,2 +1,8 @@
# 默认环境(开发环境)
VITE_NODE_ENV=development
# 应用版本号
VITE_APP_VERSION=1.0.0
# 构建时间戳(会在构建时自动更新)
VITE_BUILD_TIME=""
# 是否启用版本检查
VITE_ENABLE_VERSION_CHECK=true

View File

@ -7,6 +7,12 @@
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 禁用缓存 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Likei H5</title>
<style>
body {

View File

@ -1,5 +1,6 @@
import './assets/main.css'
import { logEnvInfo } from './utils/env.js'
import { versionChecker } from './utils/versionChecker.js'
import { createApp } from 'vue'
import App from './App.vue'
@ -8,6 +9,15 @@ import router from './router'
// 初始化环境信息
logEnvInfo()
// 版本检查
if (versionChecker.checkVersion()) {
console.log('检测到新版本,正在更新...')
// 可以选择显示一个更新提示
// if (confirm('检测到新版本,是否立即更新?')) {
// versionChecker.forceReload()
// }
}
const app = createApp(App)
app.use(router)

View File

@ -0,0 +1,71 @@
// 版本检查工具
export class VersionChecker {
constructor() {
this.currentVersion = import.meta.env.VITE_APP_VERSION || Date.now().toString()
this.storageKey = 'h5_app_version'
}
// 检查版本更新
checkVersion() {
const storedVersion = localStorage.getItem(this.storageKey)
if (storedVersion !== this.currentVersion) {
// 版本不匹配,清除缓存并刷新
this.clearCache()
localStorage.setItem(this.storageKey, this.currentVersion)
// 延迟刷新,确保缓存清理完成
setTimeout(() => {
this.forceReload()
}, 100)
return true // 需要刷新
}
return false // 不需要刷新
}
// 清除应用缓存
clearCache() {
// 清除localStorage保留必要的数据
const keysToKeep = ['user_token', 'user_info'] // 保留的关键数据
const allKeys = Object.keys(localStorage)
allKeys.forEach(key => {
if (!keysToKeep.includes(key)) {
localStorage.removeItem(key)
}
})
// 清除sessionStorage
sessionStorage.clear()
// 如果支持Service Worker清除SW缓存
if ('serviceWorker' in navigator) {
caches.keys().then(names => {
names.forEach(name => {
caches.delete(name)
})
})
}
}
// 强制刷新页面
forceReload() {
// 尝试硬刷新(清除缓存)
if (window.location.reload) {
window.location.reload(true)
} else {
// 备用方案:重新加载页面
window.location.href = window.location.href + '?t=' + Date.now()
}
}
// 获取当前版本
getCurrentVersion() {
return this.currentVersion
}
}
// 导出单例
export const versionChecker = new VersionChecker()

View File

@ -795,7 +795,7 @@ onMounted(async () => {
}
.progress-status {
background-color: #3B82F6;
background: linear-gradient(to right, #FF7578, #FF3D40);
color: white;
padding: 4px 12px;
border-radius: 12px;

View File

@ -14,6 +14,24 @@ export default defineConfig({
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
build: {
// 生成唯一的文件名,避免缓存问题
rollupOptions: {
output: {
// 为 JS 文件添加时间戳
entryFileNames: `js/[name]-[hash]-${Date.now()}.js`,
chunkFileNames: `js/[name]-[hash]-${Date.now()}.js`,
assetFileNames: (assetInfo) => {
const info = assetInfo.name.split('.')
const ext = info[info.length - 1]
if (/\.(css)$/.test(assetInfo.name)) {
return `css/[name]-[hash]-${Date.now()}.[ext]`
}
return `assets/[name]-[hash]-${Date.now()}.[ext]`
}
}
}
},
server: {
host: '0.0.0.0', // 允许外部访问
port: 5173, // 指定端口