发版提示

1、打包的时候，增加版本json的文件
- 在public目录下放一个version.json文件，每次构建的时候更新里面的版本号
- 可以编写一个插件，在构建生成后，自动生成一个version.json文件到dist目录
2、根据script src的hash值去判断

利用插件

@plugin-web-update-notification
- 原理
  - 以git commit hash作为版本号，并将version写入json文件中。客户端轮询服务器的版本，与本地的进行比较，如果不相同，则通知用户刷新页面

手动实现

1、创建版本插件 vite-plugin-version.js

js
// vite-plugin-version.js
import { writeFileSync } from 'fs'

export default function (version = Date.now()) {
  return {
    name: 'vite-plugin-version',
    buildStart() {
      writeFileSync('public/version.json', JSON.stringify({ version }))
    }
  }
}

2、配置Vite

js
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import versionPlugin from './vite-plugin-version'

export default defineConfig({
  plugins: [vue(), versionPlugin()],
})

3、版本检查工具类 src/utils/version.js

js
let localVersion = localStorage.getItem('app_version')

export const checkVersion = async () => {
  try {
    // 加随机参数防止缓存
    const res = await fetch('/version.json?t=' + Date.now())
    const { version } = await res.json()
    
    if (localVersion !== version) {
      const confirm = window.confirm('发现新版本，立即刷新体验？')
      if (confirm) {
        localStorage.setItem('app_version', version)
        window.location.reload()
      }
    }
  } catch (e) {
    console.error('版本检查失败:', e)
  }
}

4、全局检测逻辑
- 在入口文件 main.js 添加定时检查：

js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { checkVersion } from './utils/version'

const app = createApp(App)
app.mount('#app')

// 每5分钟检查一次版本
setInterval(checkVersion, 300000)

5、路由跳转时检测

在路由守卫中添加检查：

javascript
// router.js
import { createRouter } from 'vue-router'
import { checkVersion } from './utils/version'

const router = createRouter({...})

router.afterEach(() => {
  checkVersion() // 每次路由跳转后检查 [[1]]
})

缓存问题

服务器端配置，禁止缓存 version.json、index.html

本地持久化存储版本号

页面刷新后会丢失，导致重复检测
避免重复提示（用户已刷新后不再提示）
首次访问，一般来说，不需要通知用户刷新页面，首次访问就是最新的页面
- 增加判断，如果本地没有版本号，就不需要提示用户

js
// 首次访问初始化
if (!localVersion) {
  localStorage.setItem('app_version', newInfo.hash)
  return
}

版本号生成

构建时间与文件内容无直接关联，比如有些情况构建了，但是文件没有发生变化，其实不需要提示用户更新，这个时候就有问题
服务器时间与本地时间可能存在偏差的时候

正确版本号生产方案：

git commit hash
使用文件内容生成哈希

考虑注意问题

需要处理生产环境的判断，避免在开发环境触发检测
- 可通过import.meta.env判断
定时器的清理，避免内存泄漏
- 应用页面卸载时，清除定时器，如在App.vue
版本号生成，通过时间戳方式一定准确吗，可考虑git commit hash
缓存问题
- 使用随机查询参数避免缓存
添加本地持久化存储
- 使用 localStorage 记录版本号

利用插件​

手动实现​

缓存问题​

本地持久化存储版本号​

版本号生成​

考虑注意问题​

利用插件

手动实现

缓存问题

本地持久化存储版本号

版本号生成

考虑注意问题