妇联网站建设方案,南京建站公司网站,百度登录入口百度,360免费做网站电话背景
当一个页面很久没刷新#xff0c;又突然点到页面。由于一些文件是因为动态加载的#xff0c;当重编后#xff08;如前后端发版后#xff09;#xff0c;这些文件会发生变化#xff0c;就会出现加载不到的情况。进而导致正在使用的用户#xff0c;点击页面发现加载…背景
当一个页面很久没刷新又突然点到页面。由于一些文件是因为动态加载的当重编后如前后端发版后这些文件会发生变化就会出现加载不到的情况。进而导致正在使用的用户点击页面发现加载不顺畅、卡顿问题。
解决思路
使用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();
})
