## 实现思路: 在每次打包的时候生成一个version.json版本信息文件,在页面跳转的时候请求服务端的version.json的版本号和浏览器本地的版本号对比,进行监控版本的迭代更新,并对页面进行刷新 ``` 1、使用Vite插件打包自动生成版本信息 2、Vite.config.ts配置 3、路由配置 ``` ### 1. 使用Vite插件打包自动生成版本信息 utils文件下新建versionUpdatePlugin.ts文件 ```javascript import fs from "fs"; import path from "path"; interface OptionVersion { version: number | string; } interface configObj extends Object { publicDir: string; } const writeVersion = (versionFileName: string, content: string | NodeJS.ArrayBufferView) => { // 写入文件 fs.writeFile(versionFileName, content, err => { if (err) throw err; }); }; export default (options: OptionVersion) => { let config: configObj = { publicDir: "" }; return { name: "version-update", configResolved(resolvedConfig: configObj) { // 存储最终解析的配置 config = resolvedConfig; }, buildStart() { // 生成版本信息文件路径 const file = config.publicDir + path.sep + "version.json"; // 这里使用编译时间作为版本信息 const content = JSON.stringify({ version: options.version }); if (fs.existsSync(config.publicDir)) { writeVersion(file, content); } else { fs.mkdir(config.publicDir, err => { if (err) throw err; writeVersion(file, content); }); } } }; }; ``` ### 2. Vite.config.ts配置 ```javascript // 打包时获取版本信息 import versionUpdatePlugin from "./src/utils/versionUpdatePlugin"; export default defineConfig(({ mode }: ConfigEnv): UserConfig => { const CurrentTimeVersion = new Date().getTime(); return { define: { // 定义全局变量 "process.env.VITE__APP_VERSION__": CurrentTimeVersion }, plugins: [ // 版本更新插件 versionUpdatePlugin({ version: CurrentTimeVersion }) ] } }; }); ``` ### 3. 路由配置 ```javascript import { ElMessageBox } from "element-plus"; import axios from "axios"; // 版本检查 export const versionCheck = async () => { const response = await axios.get("version.json"); //process.env.VITE__APP_VERSION__ 获取环境变量设置的值,判断是否与生成的版本信息一致 if (process.env.VITE__APP_VERSION__ !== response.data.version) { ElMessageBox.confirm(`检测到新版本,更新之后将能体验到更多好用的功能,是否现在更新?`, "版本更新提示", { confirmButtonText: "更新", type: "warning", showCancelButton: false, draggable: true }).then(async () => { window.location.reload(); }); } }; ``` ```javascript import { versionCheck } from "@/utils/versionCheck"; router.beforeEach(async (to, from, next) => { // 检查版本 await versionCheck(); }) ```