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

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

})