夜雨聆风
前端发版后用户还在用老版本?这款轻量级插件帮你完美解决!
🌟 四大核心亮点
-
多框架通吃 ：不管你是 Vue 还是 React，不管你使用的是 Vite、Webpack 还是 Nuxt 3 项目，它统统一网打尽，多套环境提供了一致的 API 体验。 -
零侵入式 UI ：插件内置了精美的弹窗 UI，带有 5 秒倒计时和进度条，无需你自己手写冗长的样式，接入即用。 -
智能检查时机 ：不仅支持定时轮询（默认每5分钟检查一次），还巧妙地监听了浏览器的 visibilitychange 事件！当用户从别的标签页切换回你的应用时，会立刻触发一次检查，体验极其丝滑。 -
人性化交互 ：发现新版本后，用户既可以选择“立即刷新”，也可以选择“稍后更新”（暂停倒计时），把选择权真正交给用户。
🛠 原理大揭秘，它是怎么工作的？
-
构建时 (Build Time) ：插件会在你的项目输出目录生成一个 version.json 文件，里面记录了当前打包的唯一版本号（基于时间戳生成）。 -
运行时 (Runtime) ：插件会在你的 index.html 中悄悄注入一段极小的自执行检查脚本。 -
比对逻辑 ：这段脚本会在浏览器中启动一个定时器，周期性地向服务器请求 version.json?t=当前时间戳 （带上时间戳参数是为了绕过浏览器 HTTP 缓存）。拿到最新的版本号后，与页面初始加载时记录的版本号进行比对，如果不一致，说明远端发版了，立即弹窗提示更新！
💻 如何接入？三分钟搞定！
pnpm add @xiaobailong/web-update-notice-plugin -D场景一：在 Vite 项目中
import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';// 引入 Vite 插件import webUpdateNotice from '@xiaobailong/web-update-notice-plugin/vite';export default defineConfig({plugins: [vue(),webUpdateNotice({checkInterval: 5 * 60 * 1000, // 默认每 5 分钟检查一次}),],});
场景二：在 Nuxt 3 项目中
export default defineNuxtConfig({modules: ['@xiaobailong/web-update-notice-plugin/nuxt'],webUpdateNotice: {checkInterval: 300000, // 5分钟base: '/'}})
场景三：在 Webpack 项目中
const HtmlWebpackPlugin = require('html-webpack-plugin');const { WebUpdateNoticePlugin } = require('@xiaobailong/web-update-notice-plugin/webpack');module.exports = {plugins: [new HtmlWebpackPlugin({ template: './public/index.html' }),new WebUpdateNoticePlugin({checkInterval: 300000,})]};
⚠️ 避坑指南（极其重要）
server {location / {try_files $uri $uri/ /index.html;# 强制 html 文件不缓存if ($request_filename ~* ^.*?.(html|htm)$) {expires -1;add_header Cache-Control "no-cache, no-store, must-revalidate";}}}