一分钟实现前端页面的更新提醒——plugin-web-update-notification

我们前端页面更新了，但是看到效果需要用户刷新页面，但是用户不知道需要刷新页面。经常会出现以下问题：

1. Bug修复了，但是看线上，依然是不对的，只因没有刷新页面；
2. 前端页面和后端接口也改了，但是由于没刷新页面，依然还是按照修改前的方式去调用接口，导致出错；
3. 跳转到一个新的路由地址，由于没刷新页面，导致旧页面没有匹配到路由，进入了404页面；

所以问题的关键在于通知用户刷新页面。下面有两种思路：

第一种思路就是像很多APP那样，用接口获取APP最新的版本号和当前的版本号做对比，再决定是否需要弹出版本更新的提示。

第二种思路是用plugin-web-update-notification

这个插件的原理是在编译代码的时候，生成一个version.json，并且向html里注入一段js逻辑，在这个js里，会去对比当前的版本和服务器上的version.json记录的版本号，如果不一致，就弹出提示，提醒用户刷新页面。

pnpm add @plugin-web-update-notification/vite -D # 注意版本号与vite需要匹配

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { webUpdateNotice } from '@plugin-web-update-notification/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    webUpdateNotice({
      logVersion: true,
    }),
  ]
})

基于vben-admin的Demo：github.com/beat-the-bu… 注意dist目录，是打包后的文件，里面插入了一段CSS和JS。

本地看效果：

1. 配置好之后，执行npm run build
2. VSCode安装Live Server插件
3. 右键 dist/index.html， 选择 open with live server
4. 修改 web_version_by_plugin.json文件内的版本号

最终效果如下：文字和样式均可以配置。