Vue项目线上更新无需强制刷新的几种实现方案(无感更新)

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

// 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()
}

// 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()
  })
}

// 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()
  }
}

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

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

// 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() })
    )
  }
}

// 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()
  }
}

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