Vue 项目线上更新无需强制刷新的方案

在 Vue 项目中，当发布新版本后，用户可能因为浏览器缓存而继续使用旧版本。以下是几种实现无感更新的方案：

1. 使用文件哈希名（Webpack 默认配置）

Vue CLI 基于 Webpack 的项目默认已经配置了文件内容哈希命名：

javascript 复制代码

// vue.config.js
module.exports = {
  filenameHashing: true, // 默认就是 true
  configureWebpack: {
    output: {
      filename: '[name].[contenthash:8].js',
      chunkFilename: '[name].[contenthash:8].js'
    }
  }
}

这样每次构建内容变化时，文件名会改变，浏览器会重新请求新文件。

2. 添加版本号或构建时间戳

在入口文件或全局变量中添加版本标识：

javascript 复制代码

// main.js
const version = process.env.VUE_APP_VERSION || '1.0.0'
window.__APP_VERSION__ = version

// 检查版本更新
if (localStorage.getItem('appVersion') !== version) {
  localStorage.setItem('appVersion', version)
  window.location.reload()
}

3. 使用 Service Worker 自动更新（PWA）

如果项目配置了 PWA：

javascript 复制代码

// src/registerServiceWorker.js 或 src/main.js

// 监听更新事件
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(reg => {
    reg.addEventListener('updatefound', () => {
      const newWorker = reg.installing
      newWorker.addEventListener('statechange', () => {
        if (newWorker.state === 'installed') {
          if (navigator.serviceWorker.controller) {
            // 检测到新版本，提示用户刷新
            showUpdateNotification()
          }
        }
      })
    })
  })
  
  // 监听控制器变化
  navigator.serviceWorker.addEventListener('controllerchange', () => {
    window.location.reload()
  })
}

4. 轮询检查版本更新

创建一个版本检查机制：

javascript 复制代码

// utils/versionCheck.js
export function initVersionCheck() {
  const checkInterval = 5 * 60 * 1000 // 5分钟检查一次
  const versionFile = `/version.json?t=${Date.now()}`

  setInterval(() => {
    fetch(versionFile)
      .then(res => res.json())
      .then(data => {
        if (data.version !== window.__APP_VERSION__) {
          notifyUpdate()
        }
      })
  }, checkInterval)
}

function notifyUpdate() {
  // 显示更新提示，用户确认后刷新
  if (confirm('发现新版本，是否立即更新？')) {
    window.location.reload()
  }
}

5. 使用 WebSocket 实时通知

对于需要即时更新的系统：

javascript 复制代码

// 建立WebSocket连接
const ws = new WebSocket('wss://your-websocket-server')

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  if (data.type === 'version_update') {
    notifyUpdate()
  }
}

6. 打包时自动生成版本文件

在构建脚本中添加版本文件生成：

javascript 复制代码

// vue.config.js
const fs = require('fs')
const packageJson = require('./package.json')

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0]['process.env'].VUE_APP_VERSION = `"${packageJson.version}"`
      return args
    })
  },
  // 构建完成后生成版本文件
  afterBuild: () => {
    fs.writeFileSync(
      'dist/version.json',
      JSON.stringify({ version: packageJson.version, buildTime: new Date() })
    )
  }
}

最佳实践建议

生产环境推荐组合：哈希文件名 + 版本检查提示
关键系统考虑：Service Worker + WebSocket 即时通知
用户友好性：提供"稍后更新"选项，不要强制立即刷新
版本管理：保持与 package.json 版本号同步

实现示例（完整方案）

javascript 复制代码

// src/utils/versionChecker.js
export function initVersionChecker() {
  // 初始设置版本
  const currentVersion = process.env.VUE_APP_VERSION
  window.__APP_VERSION__ = currentVersion
  localStorage.setItem('appVersion', currentVersion)

  // 检查版本更新
  const checkVersion = async () => {
    try {
      const res = await fetch(`/version.json?t=${Date.now()}`)
      const { version } = await res.json()
      
      if (version !== currentVersion) {
        showUpdateNotification(version)
      }
    } catch (error) {
      console.error('版本检查失败:', error)
    }
  }

  // 定时检查（每小时一次）
  setInterval(checkVersion, 60 * 60 * 1000)
  // 页面显示时检查
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) checkVersion()
  })
}

function showUpdateNotification(newVersion) {
  // 使用UI库的通知组件或自定义模态框
  const confirmed = confirm(`发现新版本 ${newVersion}，是否立即更新？`)
  if (confirmed) {
    window.location.reload()
  }
}

在 main.js 中初始化：

javascript 复制代码

import { initVersionChecker } from '@/utils/versionChecker'
initVersionChecker()

这样配置后，你的 Vue 应用可以实现：

文件内容变化自动更新（哈希文件名）
定期检查版本更新
用户交互友好的更新提示
无需强制刷新即可获取最新版本