// build-version.js （自動(dòng)生成版本文件腳本）
const fs = require('fs')
const path = require('path')

// 方案A：使用時(shí)間戳作為版本標(biāo)識(shí)（最簡(jiǎn)單，確保每次打包唯一）
const version = new Date().getTime().toString()

// 版本文件內(nèi)容
const versionJson = {
  version: version,
  updateTime: new Date().toLocaleString() // 可選：添加更新時(shí)間，便于排查
}

// 寫入version.json文件（項(xiàng)目根目錄）
const versionPath = path.resolve(__dirname, 'public', 'version.json')
fs.writeFileSync(versionPath, JSON.stringify(versionJson, null, 2), 'utf-8')

console.log(`? 自動(dòng)生成版本文件成功，版本號(hào)：${version}`)

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

chainWebpack(config) {
  // ... 其他配置
  
  // 復(fù)制 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'
/**
 * 版本更新檢測(cè)工具類（僅生產(chǎn)環(huán)境啟用輪詢，內(nèi)置環(huán)境判斷）
 */
class VersionUpdate {
  constructor(options = {}) {
    this.config = {
      versionFileUrl: '/version.json', // 版本文件地址
      localVersionKey: 'cmpVersion', // 本地存儲(chǔ)的版本號(hào)key
      disableFetchCache: true, // 禁用Fetch緩存
      pollInterval: 5 * 60 * 1000, // 5分鐘輪詢一次
      hasNotified: false // 是否已提醒過用戶有新版本
    }
    Object.assign(this.config, options)
    // 定時(shí)輪詢定時(shí)器
    this.pollTimer = null
    // 識(shí)別當(dāng)前環(huán)境（Vue CLI 4 自動(dòng)注入的環(huán)境變量）
    this.isProduction = process.env.NODE_ENV === 'production'
  }

  /**
   * 核心方法：執(zhí)行版本檢測(cè)
   */
  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(`版本文件請(qǐng)求失敗，狀態(tài)碼：${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;">建議點(diǎn)擊刷新頁(yè)面，以獲取最新功能和修復(fù)</p> <p style="color:#cccccc;font-size:12px;">更新時(shí)間：${latestVersionInfo.updateTime}</p>`,
          duration: 0,
          customClass: 'check-version-notify',
          onClick: () => {
            this.forceRefreshPage()
          },
          onClose: () => {
            this.resetNotifyFlag()
          }
        })
        return true
      } else {
        // 版本一致時(shí)，重置提醒標(biāo)記，便于后續(xù)輪詢檢測(cè)新版本
        this.config.hasNotified = false
        // console.log('當(dāng)前已是最新版本，已緩存最新版本號(hào)')
        return false
      }
    } catch (error) {
      console.warn('版本檢測(cè)異常，不影響應(yīng)用運(yùn)行：', error.message)
      return false
    }
  }
  /**
   * 啟動(dòng)定時(shí)輪詢檢測(cè)（內(nèi)置環(huán)境判斷：僅生產(chǎn)環(huán)境生效）
   */
  async startPolling() {
    // 核心：非生產(chǎn)環(huán)境，直接返回，不啟動(dòng)輪詢
    if (!this.isProduction) {
      console.log('當(dāng)前為非生產(chǎn)環(huán)境，不啟動(dòng)版本檢測(cè)輪詢')
      return
    }

    // 生產(chǎn)環(huán)境：正常啟動(dòng)輪詢
    this.stopPolling() // 先停止已有輪詢，避免重復(fù)啟動(dòng)
    this.checkVersion(true) // 立即執(zhí)行一次檢測(cè)

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

    console.log(`生產(chǎn)環(huán)境版本輪詢檢測(cè)已啟動(dòng)，每隔${this.config.pollInterval / 1000 / 60}分鐘檢測(cè)一次`)
  }

  /**
   * 停止定時(shí)輪詢檢測(cè)
   */
  stopPolling() {
    if (this.pollTimer) {
      clearInterval(this.pollTimer)
      this.pollTimer = null
      console.log('版本輪詢檢測(cè)已停止')
    }
  }

  /**
   * 重置提醒標(biāo)記
   */
  resetNotifyFlag() {
    this.config.hasNotified = false
  }

  // 緩存最新版本號(hào)
  cacheLatestVersion(version) {
    localStorage.setItem(this.config.localVersionKey, version)
    this.resetNotifyFlag()
  }

  // 強(qiáng)制刷新頁(yè)面
  forceRefreshPage() {
    window.location.reload(true)
  }
}

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

// 版本檢測(cè)通知樣式
.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()
}