vue3+vite實現版本更新檢查的示例代碼
背景
當一個頁面很久沒刷新,又突然點到頁面。由于一些文件是因為動態(tài)加載的,當重編后(如前后端發(fā)版后),這些文件會發(fā)生變化,就會出現加載不到的情況。進而導致正在使用的用戶,點擊頁面發(fā)現加載不順暢、卡頓問題。
解決思路
使用Vite構建一個插件,在每次打包時自動生成version.json版本信息文件,記錄版本信息(最好使用時間戳來作為版本號)。然后在路由跳轉時,通過請求服務端的version.json的版本號與瀏覽器本地的版本號對比來檢測是否需要更新,并彈窗提示用戶是否立即刷新頁面以獲取最新版本。
實現代碼
1、utils文件下新建versionUpdatePlugin.ts文件
//使用Vite插件打包自動生成版本信息 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配置
// 打包時獲取版本信息 import versionUpdatePlugin from "./src/utils/versionUpdatePlugin"; export default (): UserConfig => { const CurrentTimeVersion = new Date().getTime(); return { define: { // 定義全局變量(轉換為時間戳格式) 'import.meta.env.VITE_APP_VERSION': JSON.stringify(Date.now()), }, plugins: [ // 版本更新插件 versionUpdatePlugin({ version: CurrentTimeVersion }) ] } }; });
3、utils文件下新建versionCheck.ts文件
import { DialogPlugin } from 'tdesign-vue-next'; import axios from 'axios'; // 版本檢查 export const versionCheck = async () => { const response = await axios.get('version.json'); console.log('當前版本:', import.meta.env.VITE_APP_VERSION); console.log('最新版本:', response.data.version); // process.env.VITE__APP_VERSION__ 獲取環(huán)境變量設置的值,判斷是否與生成的版本信息一致 if (import.meta.env.VITE_APP_VERSION !== response.data.version) { const confirmDialog = DialogPlugin.confirm({ header: '版本更新提示', body: '檢測到新版本,更新之后將能體驗到更多好用的功能,是否現在更新?', confirmBtn: { content: '更新', theme: 'primary', }, theme: 'warning', onConfirm: () => { confirmDialog.update({ confirmBtn: { content: '更新中', loading: true } }); const timer = setTimeout(() => { window.location.reload(); clearTimeout(timer); }, 500); }, onCancel: () => { console.log('用戶取消了更新'); }, }); } };
4、路由配置
在路由配置文件(如permission.ts)中調用檢查版本函數
import { versionCheck } from "@/utils/versionCheck"; router.beforeEach(async (to, from, next) => { // 檢查版本 await versionCheck(); })
到此這篇關于vue3+vite實現版本更新檢查的示例代碼的文章就介紹到這了,更多相關vue3 vite版本更新檢查內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue實現兩級select聯動+input賦值+select選項清空
這篇文章主要介紹了vue實現兩級select聯動+input賦值+select選項清空過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08vue3中element-plus?Upload上傳文件代碼示例
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關資料,在時間開發(fā)中上傳文件是經常遇到的一個需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-08-08安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決
這篇文章主要介紹了安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現按需加載
這篇文章主要介紹了從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現按需加載,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03