带你用vue纯前端方案快速实现自动检测更新

前言

估计每位同学都会一个痛点，重新部署前端项目的时候，如果用户一直停留在页面上并未刷新使用，会存在跳转页面报错等问题，因此，当前端部署项目后，需要想办法提醒用户重新加载页面。

技术框架

webpack、vue

实现原理

• 编译项目时动态生成一个记录版本号的文件
• 轮询（60s）这个文件，判断版本号，有新版本则通知用户刷新页面
• 通过监听visibilitychange事件，在页面隐藏时停止轮询，页面显示立马检测一次更新

流程图

效果图

代码实现

1. 在vue.config.js实现动态创建版本号文件

• 最简单粗暴的方法，检测生成dist目录生成后插入版本号文件。

const { writeFile, mkdir, existsSync } = require('fs')
// 动态生成版本号
const createVersion = () => {
  // mkdir('./dist', { recursive: true }, (err) => {
  //检测dist目录是否存在
  if (existsSync('./dist')) {
    writeFile(`./dist/version.json`, `{"version":"${Date.now()}"}`, (err) => {
      if (err) {
        console.log('写入version.json失败')
        console.log(err)
      } else {
        console.log('写入version.json成功')
      }
    })
  } else {
    setTimeout(createVersion, 1000)
  }
  // })
}
setTimeout(createVersion, 10000)

2. 封装auto-update.js

/*
 * @Description: 自动更新
 */

let currentVersion // 当前版本
const timeData = 60 * 1000 // 检查间隔时间
let hidden = false // 页面是否隐藏
let setTimeoutId

// 获取版本号
const getVersion = async () => {
  return fetch('/version.json?timestep=' + Date.now()).then((res) => res.json())
}

// 检查更新
const checkUpdate = async () => {
  const version = (await getVersion()).version
  if (Number(version) > Number(currentVersion)) {
    const result = confirm('发现新版本，点击确定更新')
    if (result) {
      location.reload() // 刷新当前页
    }
  }
}

// 自动更新
const autoUpdate = async () => {
  setTimeoutId = setTimeout(async () => {
    // 页面隐藏了就不检查更新
    if (!hidden) {
      checkUpdate()
    }
    autoUpdate()
  }, timeData)
}

// 停止检测更新
const stop = () => {
  if (setTimeoutId) {
    clearTimeout(setTimeoutId)
    setTimeoutId = ''
  }
}

// 开始检查更新
const start = async () => {
  currentVersion = (await getVersion()).version
  autoUpdate()
  // 监听页面是否隐藏
  document.addEventListener('visibilitychange', () => {
    hidden = document.hidden
    if (hidden) {
      stop()
    } else {
      checkUpdate()
      autoUpdate()
    }
  })
}

export default { start }

3. 在main.js中使用

import autoUpdate from './auto-update'
// 非开发环境
process.env.NODE_ENV !== 'development' && autoUpdate.start()

结尾

赶紧用在你的项目吧，再也不用烦恼用户没有刷新页面了。