1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

1

2

3

4

5

{

  "scripts": {

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

  }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

    })

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

// 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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 版本检测通知样式

.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;

  }

}

1

2

3

4

5

6

7

8

import versionUpdate from '@/utils/versionUpdate'

...

mounted() {

  versionUpdate.startPolling()

},

beforeDestroy() {

  versionUpdate.stopPolling()

}