" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3+vite實現版本更新檢查的示例代碼

 更新時間:2024年11月10日 09:10:38   作者:周三有雨  
本文描述了一個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選項清空

    這篇文章主要介紹了vue實現兩級select聯動+input賦值+select選項清空過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • 通過Element ui往頁面上加一個分頁導航條的方法

    通過Element ui往頁面上加一個分頁導航條的方法

    這篇文章主要介紹了通過Element ui往頁面上加一個分頁導航條的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-05-05
  • VUE零基礎入門axios的使用

    VUE零基礎入門axios的使用

    這篇文章主要介紹了axios在Vue項目中用來向后臺發(fā)送請求(調接口API),獲取響應信息的方法,axios 是一個輕量的 HTTP客戶端,基于 XMLHttpRequest 服務來執(zhí)行 HTTP 請求,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • vue3中element-plus?Upload上傳文件代碼示例

    vue3中element-plus?Upload上傳文件代碼示例

    這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關資料,在時間開發(fā)中上傳文件是經常遇到的一個需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-08-08
  • 安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決

    安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決

    這篇文章主要介紹了安裝vue3開發(fā)者工具但控制臺沒有顯示出vue選項的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 如何用Vite構建工具快速創(chuàng)建Vue項目

    如何用Vite構建工具快速創(chuàng)建Vue項目

    Vite是一個web開發(fā)構建工具,由于其原生?ES?模塊導入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關于如何用Vite構建工具快速創(chuàng)建Vue項目的相關資料,需要的朋友可以參考下
    2022-05-05
  • Vue 指令實現按鈕級別權限管理功能

    Vue 指令實現按鈕級別權限管理功能

    這篇文章主要介紹了Vue 指令實現按鈕級別權限管理功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • 從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現按需加載

    從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現按需加載

    這篇文章主要介紹了從0搭建Vue3組件庫如何使用?glup?打包組件庫并實現按需加載,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • vue實現標簽云效果的示例

    vue實現標簽云效果的示例

    這篇文章主要介紹了vue實現標簽云效果的示例,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2020-11-11
  • React?Diff算法不采用Vue的雙端對比原因詳解

    React?Diff算法不采用Vue的雙端對比原因詳解

    這篇文章主要介紹了React?Diff算法不采用Vue雙端對比算法原因詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07

最新評論