vue3+vite實現(xiàn)版本更新檢查的示例代碼
背景
當(dāng)一個頁面很久沒刷新,又突然點到頁面。由于一些文件是因為動態(tài)加載的,當(dāng)重編后(如前后端發(fā)版后),這些文件會發(fā)生變化,就會出現(xiàn)加載不到的情況。進(jìn)而導(dǎo)致正在使用的用戶,點擊頁面發(fā)現(xiàn)加載不順暢、卡頓問題。
解決思路
使用Vite構(gòu)建一個插件,在每次打包時自動生成version.json版本信息文件,記錄版本信息(最好使用時間戳來作為版本號)。然后在路由跳轉(zhuǎn)時,通過請求服務(wù)端的version.json的版本號與瀏覽器本地的版本號對比來檢測是否需要更新,并彈窗提示用戶是否立即刷新頁面以獲取最新版本。
實現(xiàn)代碼
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: {
// 定義全局變量(轉(zhuǎn)換為時間戳格式)
'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('當(dāng)前版本:', import.meta.env.VITE_APP_VERSION);
console.log('最新版本:', response.data.version);
// process.env.VITE__APP_VERSION__ 獲取環(huán)境變量設(shè)置的值,判斷是否與生成的版本信息一致
if (import.meta.env.VITE_APP_VERSION !== response.data.version) {
const confirmDialog = DialogPlugin.confirm({
header: '版本更新提示',
body: '檢測到新版本,更新之后將能體驗到更多好用的功能,是否現(xiàn)在更新?',
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)中調(diào)用檢查版本函數(shù)
import { versionCheck } from "@/utils/versionCheck";
router.beforeEach(async (to, from, next) => {
// 檢查版本
await versionCheck();
})到此這篇關(guān)于vue3+vite實現(xiàn)版本更新檢查的示例代碼的文章就介紹到這了,更多相關(guān)vue3 vite版本更新檢查內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空
這篇文章主要介紹了vue實現(xiàn)兩級select聯(lián)動+input賦值+select選項清空過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
通過Element ui往頁面上加一個分頁導(dǎo)航條的方法
這篇文章主要介紹了通過Element ui往頁面上加一個分頁導(dǎo)航條的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue3中element-plus?Upload上傳文件代碼示例
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關(guān)資料,在時間開發(fā)中上傳文件是經(jīng)常遇到的一個需求,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決
這篇文章主要介紹了安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
如何用Vite構(gòu)建工具快速創(chuàng)建Vue項目
Vite是一個web開發(fā)構(gòu)建工具,由于其原生?ES?模塊導(dǎo)入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關(guān)于如何用Vite構(gòu)建工具快速創(chuàng)建Vue項目的相關(guān)資料,需要的朋友可以參考下2022-05-05
Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能
這篇文章主要介紹了Vue 指令實現(xiàn)按鈕級別權(quán)限管理功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現(xiàn)按需加載
這篇文章主要介紹了從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現(xiàn)按需加載,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03

