Vue3打包自动生成版本JSON文件,添加系统版本检查,实现系统自动更新提示

实现该功能一共有三步。废话不多说，直接上代码！！！

第一步：打包时自动生成版本信息的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 {Promise<boolean>}  返回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();...})