前端更新部署代码后通知用户刷新（禁止废话版）

流程图

实现

1. 在项目的 根目录下 创建version.js文件内容写入以下代码⬇️

   // https://nodejs.org/docs/latest/api/fs.html#file-system
   import { writeFileSync } from 'node:fs'
   import { join, dirname } from 'node:path'
   import { fileURLToPath } from 'node:url'
   
   // 获取当前模块的目录名
   const __dirname = dirname(fileURLToPath(import.meta.url))
   // 构建文件路径，指向 'public' 目录下的 'version.json' 文件 没有则创建
   const filePath = join(__dirname, 'public', 'version.json')
   // 将当前时间戳作为版本号写入 'version.json' 文件中
   writeFileSync(filePath, `{"version":"${Date.now()}"}`)
   

   例如：

   

2. 在项目中的创建此目录结构 ➡️ utils》watchUpdate.js，写入下面代码⬇️

   let time = 0 // 计算轮询次数
   let timer = null // 轮询定时器
   let version = localStorage.getItem('v') || '' // 本地存储版本号
   // 是否是生产环境
   let prodFlag = ['production'].includes(process.env.NODE_ENV)
   
   // 轮训检测方法
   let timerFunction = async () => {
     // 超过5次，清除定时器
     if (time >= 5) {
       clearInterval(timer)
       return (timer = null)
     }
   
     try {
       // 获取最新版本号
       let res = await fetch(`/version.json?v=${Date.now()}`)
       if (res.ok) {
         const vJson = await res.json()
         if (!version) {
           // 第一次没有 将存入
           version = vJson.version
           localStorage.setItem('v', vJson.version)
         } else if (version !== vJson.version) {
           // 版本号不同，提示刷新
           if (confirm('检测到版本更新，是否刷新？')) {
             localStorage.setItem('v', vJson.version)
             window.location.reload()
           } else {
             // 用户点击取消 清除定时器
             clearTimer()
           }
         }
       }
     } catch (error) {
       console.error(error)
       return clearTimer()
     }
     time++
   }
   
   // 监测鼠标是否移动 移动代表用户活跃中
   const moveFunction = () => {
     if (prodFlag) {
       console.log('===鼠标移动了===', prodFlag)
       time = 0
       if (!timer) {
         timer = setInterval(timerFunction, 1000)
       }
     }
   }
   
   // 引用的时候 开始轮询监并听鼠标移动事件
   if (prodFlag) {
     timer = setInterval(timerFunction, 3000)
     window.addEventListener('mousemove', moveFunction)
   }
   
   // 清除轮询 不监听鼠标事件
   const clearTimer = () => {
     clearInterval(timer)
     window.removeEventListener('mousemove', moveFunction)
     timer = null
   }
   

   例如：

   

3. 在main.js文件中引入watchUpdate.js

   import './utils/watchUpdate'
   

4. 在package.json中修改 script 命令 当在终端进行npm run build打包时会先执行node version.js 在public目录下生成版本号 注意 ：根据自己项目中的package.json 》 script下的命令进行修改

   "scripts": {
       "dev": "vite --host",
       "build": "node version.js && vite build",
       "preview": "vite preview",
       "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
       "format": "prettier --write src/"
     },
   

🌟相关资料🌟

Date.now() 的理解

window Fetch的理解