版本检测

public/version.json

@@ -1,3 +0,0 @@
-{
-  "version": 1743588677628
-}

src/App.vue

@@ -5,54 +5,14 @@
 </template>
 
 <script>
-import axios from 'axios'
-// import { setBurialPoint } from '@/api/system'
-// import { getToken } from '@/utils/auth'
+import autoRefresh from './update'
 export default {
   name: 'App',
-  data () {
-    return {
-      timer: null
-    }
-  },
-  mounted () {
-    // if (getToken()) {
-    //   this.handleBurialPoint(0)
-    // }
-    if (process.env.NODE_ENV !== 'production') return
-    this.timer = setInterval(() => {
-      this.checkVersion()
-    }, 3000)
-  },
-  beforeDestroy () {
-    if (process.env.NODE_ENV !== 'production') return
-    clearInterval(this.timer)
-  },
-  methods: {
-    checkVersion () {
-      const oldVersion = localStorage.getItem('version')
-      axios.get('/version.json', {
-        cache: 'no-store' // 禁用缓存
-      }).then(({ data }) => {
-        const res = data
-        if (+oldVersion !== +res.version) {
-          alert('页面已经更新，请点击 “确认” 按钮继续使用')
-          // 如果有更新，保存最新版本
-          localStorage.setItem('version', res.version)
-          // 帮用户刷新页面
-          setTimeout(() => {
-            window.location.reload()
-          }, 0)
-        }
-      })
-    }
-    // async handleBurialPoint () {
-    //   try {
-    //     await setBurialPoint({ accessRecordIndex: 'home' })
-    //   } catch (error) {
-    //     console.log('访问新增失败')
-    //   }
+  created () {
+    // if (process.env.NODE_ENV !== 'production') {
+    //   return
     // }
+    autoRefresh()
   }
 }
 </script>

src/update.js

@@ -0,0 +1,56 @@
+let lastSrc // 上次获取的script地址
+const scriptReg = /<script.*src=["'](?<src>[^"']+)/gm
+
+/**
+ * 获取页面中的script
+ *
+ */
+
+async function extractNewScripts (url) {
+  const html = await fetch('/?_timestamp' + Date.now()).then((resp) => resp.text())
+  scriptReg.lastIndex = 0
+  const scripts = []
+  let match
+  while ((match = scriptReg.exec(html))) {
+    scripts.push(match.groups.src)
+  }
+  return scripts
+}
+
+/**
+ * 检测是否需要更新
+ */
+async function needUpdate () {
+  const scripts = await extractNewScripts()
+  if (!lastSrc) {
+    lastSrc = scripts
+    return false
+  }
+  let result = false
+  if (lastSrc.length !== scripts.length) {
+    result = true
+  }
+  for (let i = 0; i < lastSrc.length; i++) {
+    if (scripts[i] !== lastSrc[i]) {
+      result = true
+      break
+    }
+  }
+  lastSrc = scripts
+  return result
+}
+
+const DURATION = 3000
+
+export default function autoRefresh () {
+  setTimeout(async () => {
+    const willUpdate = await needUpdate()
+    if (willUpdate) {
+      const result = confirm('检测到有版本更新，是否刷新页面？')
+      if (result) {
+        location.reload()
+      }
+    }
+    autoRefresh()
+  }, DURATION)
+}

vue.config.js

@@ -3,7 +3,7 @@ const { defineConfig } = require('@vue/cli-service')
 const WriteFilePlugin = require('write-file-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-const fs = require('fs')
+// const fs = require('fs')
 // 配置编辑器
 const Timestamp = new Date().getTime()
 
@@ -92,23 +92,23 @@ module.exports = defineConfig({
         return options
       })
     })
-    config.plugin('generate-version-file').use({
-      apply: (compiler) => {
-        // 生成当前时间戳
-        // const timestamp = Date.now()
+    // config.plugin('generate-version-file').use({
+    //   apply: (compiler) => {
+    //     // 生成当前时间戳
+    //     // const timestamp = Date.now()
 
-        // 构造 version.json 内容
+    //     // 构造 version.json 内容
 
-        const versionData = {
-          version: Timestamp
-        }
+    //     const versionData = {
+    //       version: Timestamp
+    //     }
 
-        // 写入 version.json 文件
-        if (process.env.NODE_ENV === 'production') {
-          fs.writeFileSync('./public/version.json', JSON.stringify(versionData, null, 2))
-        }
-      }
-    })
+    //     // 写入 version.json 文件
+    //     if (process.env.NODE_ENV === 'production') {
+    //       fs.writeFileSync('./public/version.json', JSON.stringify(versionData, null, 2))
+    //     }
+    //   }
+    // })
     // config.output.chunkFilename('js/[name].[contenthash].js').end()
   },
   // babel-loader 是否处理 node_modules 中的依赖包，处理哪些依赖包，参数类型: boolean | Array<string | RegExp>