Vue 纯前端实现检测版本更新并提示

当我们发布了新版本，例如后端接口有破坏性更新，若用户页面没有刷新，可能导致访问到旧接口，此时我们就需要在前端项目中实现版本更新检测主动引导用户进行更新

先看效果

一、配置vite

1. vite配置开启manifest

export default {
  plugins:[Vue()],
  // 增加此配置，开启manifest
  build: { manifest: true },
}

2. 构建项目

执行 pnpm build 命令后可以在 dist 目录中发现多出了文件 dist/.vite/manifest.json，记录着项目文件映射，之后我们可以利用此文件来判断前端项目是否更新了。

当然也可以通过其他方式比如后端增加一个版本接口，手动控制是否需要更新等等。

二、编写更新文件

例如创建 src/hooks/version.ts 文件，并填入以下内容，其中注释部分可依据自己情况修改。

import dayjs from 'dayjs'
import { NButton } from 'naive-ui'

let timer: number | undefined
/**
 * 版本更新监听器，当有新版本，右上角弹出消息通知
 * @param time 检查间隔，单位秒，默认5分钟
 */
export const useVersionUpdateListener = (time = 5 * 60) => {
  if (timer !== undefined) {
    return
  }
  if (import.meta.env.PROD) {
    let indexJs: string
    timer = setInterval(() => {
      window.axios
        .request({
          baseURL: '',
          // 此处就是访问第一步自动生成的映射文件，若是自己写后端接口，需更改此处
          url: `/.vite/manifest.json?t=${dayjs().valueOf()}`,
        })
        .then(res => {
          let file
          try {
            file = res['index.html'].file
          } catch (_) {
            return
          }
          if (!indexJs) {
            indexJs = file
          }
          if (indexJs !== file) {
            clearInterval(timer)
            // 此处使用了naive-ui全局通知弹窗，可自行改为你自己项目中的UI组件
            window.$notification.create({
              content: '发现新版本，点击获取最新版本。',
              meta: ' ',
              action: () =>
                h(
                  NButton,
                  {
                    size: 'small',
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      window.location.reload()
                    },
                  },
                  { default: () => h('span', '刷新') },
                ),
            })
          }
        })
        .catch(() => {})
    }, time * 1000)
  }
}

三、引用

在 App.vue 中引用即可

onMounted(() => {
  useVersionUpdateListener()

  // useVersionUpdateListener(15*60) // 或控制每15分钟检测一次更新
})