极简版前端版本检测方案

前端版本检测实现方案

功能概述

实现前端发版后的版本检测功能，通过自动生成版本文件并定期检查，确保用户始终使用最新版本。

实现步骤

1. 配置 Vite 插件自动生成 version.json

在 vite.config.ts 中添加自定义插件，打包时自动生成版本文件：

typescript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { writeFileSync } from 'fs'
import { resolve } from 'path'

//  封装版本生成函数
const versionPlugin = () => ({
  name: 'version-plugin',
  writeBundle() {
    const versionData = { version: Date.now() }
    writeFileSync(
      resolve(__dirname, 'dist/version.json'),
      JSON.stringify(versionData)
    )
  }
})

export default defineConfig({
  plugins: [
             vue(), 
     //  使用插件
             versionPlugin()       
  ],
})

2. 版本检测工具函数

创建 src/utils/versionCheck.ts：

typescript 复制代码

// 检查版本是否一致
const checkVersion = async () => {
  try {
    const res = await fetch('/version.json?timestamp=' + Date.now())
    const { version: remoteVersion } = await res.json()
    const localVersion = localStorage.getItem('app_version')
    
    if (localVersion && localVersion !== String(remoteVersion)) {
      localStorage.setItem('app_version', String(remoteVersion))
      alert('发现新版本，请刷新页面')
      location.reload()
    }
    
    localStorage.setItem('app_version', String(remoteVersion))
  } catch (e) {
    console.error('版本检测失败', e)
  }
}

export const initVersionCheck = () => {
  checkVersion()
  setInterval(checkVersion, 5 * 60 * 1000)
}

3. 在应用入口初始化版本检测

在 src/main.ts 中引入：

typescript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
/**   引入工具函数   **/
import { initVersionCheck } from './utils/versionCheck'

const app = createApp(App)
app.mount('#app')
/** 初始化版本检测 **/
initVersionCheck()

工作原理

打包阶段 ：Vite 插件在 writeBundle 钩子中生成 version.json，包含当前时间戳作为版本号
运行阶段：应用启动时和每隔 5 分钟检查一次版本
版本对比：对比本地存储的版本号和远程版本号，不一致时提示刷新

优势

自动化生成版本文件，无需手动维护
定时检测，及时提醒用户更新
无需额外样式和复杂逻辑