前端部署后自动检测更新

每当前端部署到服务器后，用户如果不刷新页面总会遇到点击卡住或者点不动的问题，相信很多搞前端的同学都会遇到这种情况，本人也遇到过很多次这种情况，于是就想了个办法，让项目在线上自动检测版本更新，话不多说直接上代码：

第一种办法：定时请求版本文件与本地版本标识对比，如果不想等就自动刷新页面

在打包工具中每次打包自动写入一个版本文件（我这里用的是vite）

javascript 复制代码

 writeBundle() {
      const timestamp = new Date().toLocaleString() + Math.random().toString(36).substring(2, 7)
      fs.writeFileSync('dist/build-timestamp.txt', timestamp)
      console.log('✅ dist/build-timestamp.txt 写入成功，用于部署后检测更新')
    },

新建checkVersion.ts文件,定时请求这个文件，如果本地没有版本就自动存到本地

javascript 复制代码

let versionUpdateTimer: number | null = null
let pollingActive = false

async function fetchVersionAndUpdate() {
  try {
    const oldTimestamp = localStorage.getItem('build-timestamp')
    const res = await fetch('/build-timestamp.txt', { cache: 'no-cache' })

    if (!res.ok) {
      throw new Error(`HTTP error! status: ${res.status}`)
    }

    const newTimestamp = await res.text()
    console.log('当前版本时间戳:', newTimestamp)

    if (!oldTimestamp) {
      localStorage.setItem('build-timestamp', newTimestamp)
    }

    if (oldTimestamp !== newTimestamp) {
      localStorage.setItem('build-timestamp', newTimestamp)
      window.location.reload()
    }

    // 请求完成且版本没变，延迟10秒后继续轮询（仅当轮询状态激活时）
    if (pollingActive) {
      versionUpdateTimer = window.setTimeout(fetchVersionAndUpdate, 10 * 1000)
    }
  }
  catch (err) {
    console.error('获取版本失败:', err)
    // 请求失败时延迟15秒重试
    if (pollingActive) {
      versionUpdateTimer = window.setTimeout(fetchVersionAndUpdate, 15 * 1000)
    }
  }
}

function startPolling() {
  if (!pollingActive) {
    pollingActive = true
    console.log('轮询开始')
    fetchVersionAndUpdate() // 立即执行一次
  }
}

function stopPolling() {
  pollingActive = false
  if (versionUpdateTimer !== null) {
    clearTimeout(versionUpdateTimer)
    versionUpdateTimer = null
    console.log('轮询停止')
  }
}

// 根据页面当前状态决定是否开启轮询
if (document.visibilityState === 'visible' && location.hostname !== 'localhost') {
  startPolling()
}

// 监听页面显示/隐藏，动态开启/关闭轮询
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible' && location.hostname !== 'localhost') {
    startPolling()
  }
  else {
    stopPolling()
  }
})

入口文件中导入 checkVersion.ts 文件（如果是vue就是main.ts中）

javascript 复制代码

import '@/utils/checkVersion'

至此就大功告成了，亲测可用哦，相信一定不止这一个方法可以实现，有想法的小伙伴欢迎一起来讨论