我要评论背景
当一个页面很久没刷新，又突然点到页面。由于一些文件是因为动态加载的，当重编后（如前后端发版后），这些文件会发生变化，就会出现加载不到的情况。进而导致正在使用的用户，点击页面发现加载不顺畅、卡顿问题。
解决思路
使用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__ 获取环境变量设置的值，判断是否与生成的版本信息一致
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版本更新检查内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论