vue3提示用户版本更新方式
作者:张小伟i
本文介绍了如何在项目中创建和使用自定义插件,以在构建过程中检查版本号,具体步骤包括在项目根目录下创建buildLifeHook.ts文件,并在public目录下创建version文件夹,然后在vite.config.ts中引用该插件,并在src/utils目录下创建XxzUtils.ts文件
vue3提示用户版本更新
1.项目根目录下创建myPlugins/buildLifeHook.ts
在public下创建version文件夹
- buildLifeHook.ts代码
import fs from 'fs'; import path from 'path'; // 在Vite配置中添加一个插件,监听build事件 export function buildLifeHook() { return { name: 'build-life-hook', buildStart(){ let now = new Date().toLocaleString().replace(/\//g,'-') let version = { version:now, } let versionPath = path.join(__dirname,'../public/version/versionData.json'); fs.writeFile(versionPath,JSON.stringify(version),'utf8',(err)=>{ if(err){ console.log('写入文件失败',err); }else{ console.log('写入文件成功'); } }) // console.log('构建开始!' + now); }, buildEnd() { let now = new Date().toLocaleString().replace(/\//g,'-') // console.log('构建完成!' + now); }, }; }
2.在vite.config.ts中引用插件
3.在src/utils下创建XxzUtils.ts
- XxzUtils.ts中代码
/** * 版本更新 */ /** * @description 检测版本更新 * @param allowIgnore 是否允许忽略 * @param timer 传入定时器 * @returns */ export async function checkUpdate(allowIgnore: boolean, timer?: any) { //动态获取线上的资源地址,其实就是vite.config.ts的base的值 try { // 检测前端资源是否有更新 let response = await fetch(`/version/versionData.json`, { headers: { 'Cache-Control': 'no-cache' } }).then(res => res.json()) if (!localStorage.getItem('JHS_version')) { localStorage.setItem('JHS_version', response.version) } else { if (localStorage.getItem('JHS_version') !== response.version) { if (versionUpdateTimer != null) { clearInterval(versionUpdateTimer) } ElMessageBox.confirm( '是否刷新页面重新加载最新版?', '检测到新版本', { confirmButtonText: '好的', cancelButtonText: '不了', type: 'warning', showClose: false, closeOnClickModal: false } ) .then(() => { localStorage.setItem('JHS_version', response.version) window.location.reload() }) } } } catch (e) { return Promise.reject(e) } } /** * @description 初始化版本检测器 */ let versionUpdateTimer = null export function initVersionCheck() { versionUpdateTimer = setInterval(() => { checkUpdate(true, versionUpdateTimer).then(r => null) }, 60000) }
4.在App.vue文件下调用initVersionCheck()方法
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。