咋创建自己的网站,手表交易网站,设计师装修网,点点站长工具实现该功能一共有三步。废话不多说#xff0c;直接上代码#xff01;#xff01;#xff01;
第一步#xff1a;打包时自动生成版本信息的js文件#xff0c;versionUpdate.js
import fs from fs;
import path from path;
import { ElMessageBox } from element-plus;
i…实现该功能一共有三步。废话不多说直接上代码
第一步打包时自动生成版本信息的js文件versionUpdate.js
import fs from fs;
import path from path;
import { ElMessageBox } from element-plus;
import axios from axios;const SYSTEM_VERSION_KEY version;/*** 生成版本信息文件* param isCreateVersionFile - 是否创建版本信息文件默认为false*/
export default function (options) {const { isCreateVersionFile false } options;if (!isCreateVersionFile) return false;// 生成版本信息文件内容const versionJson {// 使用编译时间作为版本号: 时间格式 时间戳[SYSTEM_VERSION_KEY]: ${new Date().toLocaleString()} - ${new Date().getTime()},};let config {publicDir: ,};return {name: version-update,configResolved(resolvedConfig) {// 获取最终解析的配置config resolvedConfig;},buildStart() {// 生成版本信息文件路径const file config.publicDir path.sep version.json;const content JSON.stringify(versionJson);// 写入文件function writeVersion(versionFileName, content) {fs.writeFile(versionFileName, content, err {if (err) throw err;});}if (fs.existsSync(config.publicDir)) {writeVersion(file, content);} else {fs.mkdir(config.publicDir, err {if (err) throw err;writeVersion(file, content);});}},};
}/*** 版本检查* return {Promiseboolean} 返回false表示需要不更新版本*/
export const versionCheck async (isCheck true) {try {if (!isCheck) return false;const { hostname, origin } window.location;// 如果是本地开发环境,则不进行版本检查if ([localhost, 127.0.0.1].includes(hostname)) return false;// 实时获取在线版本信息const res await axios.get(${origin}/version.json?t${new Date().getTime()});if (res?.status ! 200) return false;// 获取版本信息文件const { version } res?.data;// 获取本地版本号const localVersion localStorage.getItem(SYSTEM_VERSION_KEY);// 判断本地版本号与当前版本号如果一致,则不提示更新if (localVersion version) return false;ElMessageBox.confirm(检测到新版本,是否现在更新, 版本更新提示, {confirmButtonText: 更新,type: warning,showCancelButton: false,draggable: true,closeOnClickModal: false,closeOnPressEscape: false,}).then(() {// 把最新版本号存储在本地localStorage.setItem(SYSTEM_VERSION_KEY, version);window.location.reload();});} catch (error) {console.error(versionCheck--error--, error);}
};第二步 把该versionUpdate.js文件配置到vite的plugins中
import { defineConfig } from vite;
import viteCompression from vite-plugin-compression;
import { visualizer } from rollup-plugin-visualizer;
import ViteRestart from vite-plugin-restart;
import versionUpdate from ./src/utils/versionUpdate;export default ({ mode, command }) {return defineConfig({plugins: [// 版本更新versionUpdate({isCreateVersionFile: command build,}),// 文件压缩viteCompression({verbose: true, // 是否在控制台中输出压缩结果disable: false,threshold: 10240,algorithm: gzip,ext: .gz,}),visualizer({ open: true }),ViteRestart({restart: [vite.config.js, package.json],}),],esbuild: {drop: [debugger],},});
};第三步 将版本检查配置在router.beforeEach中或者你需要的地方
import { versionCheck } from /utils/versionUpdate;router.beforeEach(async (to, from, next) {// 检查版本await versionCheck();...})
