Vue实现前端页面版本检测的示例代码

// build-version.js （自动生成版本文件脚本）
const fs = require('fs')
const path = require('path')

// 方案A：使用时间戳作为版本标识（最简单，确保每次打包唯一）
const version = new Date().getTime().toString()

// 版本文件内容
const versionJson = {
  version: version,
  updateTime: new Date().toLocaleString() // 可选：添加更新时间，便于排查
}

// 写入version.json文件（项目根目录）
const versionPath = path.resolve(__dirname, 'public', 'version.json')
fs.writeFileSync(versionPath, JSON.stringify(versionJson, null, 2), 'utf-8')

console.log(`✅ 自动生成版本文件成功，版本号：${version}`)

{
  "scripts": {
    "build:prod": "node build-version.js && vue-cli-service build"
  }
}

chainWebpack(config) {
  // ... 其他配置
  
  // 复制 version.json 到 dist 目录
  config.plugin('copy')
    .tap(args => {
      const hasVersionJson = args[0].some(item => item.from === 'version.json')
      if (!hasVersionJson) {
        args[0].push({
          from: path.resolve(__dirname, 'public/version.json'),
          to: path.resolve(__dirname, 'dist/version.json')
        })
      }
      return args
    })
}

// src/utils/versionUpdate.js
import { Notification } from 'element-ui'
/**
 * 版本更新检测工具类（仅生产环境启用轮询，内置环境判断）
 */
class VersionUpdate {
  constructor(options = {}) {
    this.config = {
      versionFileUrl: '/version.json', // 版本文件地址
      localVersionKey: 'cmpVersion', // 本地存储的版本号key
      disableFetchCache: true, // 禁用Fetch缓存
      pollInterval: 5 * 60 * 1000, // 5分钟轮询一次
      hasNotified: false // 是否已提醒过用户有新版本
    }
    Object.assign(this.config, options)
    // 定时轮询定时器
    this.pollTimer = null
    // 识别当前环境（Vue CLI 4 自动注入的环境变量）
    this.isProduction = process.env.NODE_ENV === 'production'
  }

  /**
   * 核心方法：执行版本检测
   */
  async checkVersion(isInit = false) {
    try {
      if (this.config.hasNotified) return false

      const localVersion = localStorage.getItem(this.config.localVersionKey) || ''
      const fetchOptions = {}
      if (this.config.disableFetchCache) {
        fetchOptions.cache = 'no-cache'
      }

      const response = await fetch(this.config.versionFileUrl, fetchOptions)
      if (!response.ok) {
        throw new Error(`版本文件请求失败，状态码：${response.status}`)
      }
      const latestVersionInfo = await response.json()
      const serverVersion = latestVersionInfo.version

      if (isInit) {
        this.cacheLatestVersion(serverVersion)
        return true
      }

      if (serverVersion && serverVersion !== localVersion) {
        this.config.hasNotified = true
        console.log('有新版本可用', latestVersionInfo)
        Notification({
          title: '🎉 有新版本可用',
          dangerouslyUseHTMLString: true,
          message: `<p style="font-size:12px;">建议点击刷新页面，以获取最新功能和修复</p> <p style="color:#cccccc;font-size:12px;">更新时间：${latestVersionInfo.updateTime}</p>`,
          duration: 0,
          customClass: 'check-version-notify',
          onClick: () => {
            this.forceRefreshPage()
          },
          onClose: () => {
            this.resetNotifyFlag()
          }
        })
        return true
      } else {
        // 版本一致时，重置提醒标记，便于后续轮询检测新版本
        this.config.hasNotified = false
        // console.log('当前已是最新版本，已缓存最新版本号')
        return false
      }
    } catch (error) {
      console.warn('版本检测异常，不影响应用运行：', error.message)
      return false
    }
  }
  /**
   * 启动定时轮询检测（内置环境判断：仅生产环境生效）
   */
  async startPolling() {
    // 核心：非生产环境，直接返回，不启动轮询
    if (!this.isProduction) {
      console.log('当前为非生产环境，不启动版本检测轮询')
      return
    }

    // 生产环境：正常启动轮询
    this.stopPolling() // 先停止已有轮询，避免重复启动
    this.checkVersion(true) // 立即执行一次检测

    this.pollTimer = setInterval(() => {
      this.checkVersion()
    }, this.config.pollInterval)

    console.log(`生产环境版本轮询检测已启动，每隔${this.config.pollInterval / 1000 / 60}分钟检测一次`)
  }

  /**
   * 停止定时轮询检测
   */
  stopPolling() {
    if (this.pollTimer) {
      clearInterval(this.pollTimer)
      this.pollTimer = null
      console.log('版本轮询检测已停止')
    }
  }

  /**
   * 重置提醒标记
   */
  resetNotifyFlag() {
    this.config.hasNotified = false
  }

  // 缓存最新版本号
  cacheLatestVersion(version) {
    localStorage.setItem(this.config.localVersionKey, version)
    this.resetNotifyFlag()
  }

  // 强制刷新页面
  forceRefreshPage() {
    window.location.reload(true)
  }
}

const versionUpdateInstance = new VersionUpdate()
export { VersionUpdate, versionUpdateInstance }
export default versionUpdateInstance

// 版本检测通知样式
.check-version-notify{
  border: 3px solid transparent !important;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(5px);
  &:hover{
    border: 3px solid $--color-primary !important;
  }
  .el-notification__icon{
    font-size: 18px;
    height: 18px;
  }
  .el-notification__title{
    font-size: 14px;
    line-height: 18px;
  }
  .el-notification__group{
    margin-left: 8px;
  }
}

import versionUpdate from '@/utils/versionUpdate'
...
mounted() {
  versionUpdate.startPolling()
},
beforeDestroy() {
  versionUpdate.stopPolling()
}