1、vite.config中增加版本号生成插件

在/src/utils文件夹中添加versionUpdatePlugin.ts文件

//简易Ts版
// versionUpdatePlugin.js
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);
                });
            }
        },
    };
};

在vite.config中添加如下代码,编译的时候会是生成当前版本version.json文件在根目录

import versionUpdatePlugin from "./src/utils/versionUpdatePlugin";

//版本时间戳
const CurrentTimeVersion = new Date().getTime();
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  return {
    define: {
      // 定义全局变量
      "process.env.VITE__APP_VERSION__": CurrentTimeVersion,
    },
    plugins: [
      ...
    versionUpdatePlugin({
        version: CurrentTimeVersion,
      }),
    ]
  }
});

在/router/index.ts中添加版本监控代码

import axios from "axios";
// 版本监控
const versionCheck = async () => {
  if (import.meta.env.MODE === 'dev') return;
  if(!process.env.VITE__APP_VERSION__) return;
  const response = await axios.get(`${window.location.origin}/version.json`)
  // eslint-disable-next-line no-undef
  if (process.env.VITE__APP_VERSION__ !== response.data.version) {
    window.location.reload()
  }
}

router.afterEach(async (to, from, next) => {
  //在页面跳转之后如果更新版本了，就刷新当前页面
  //如果需要在跳转之前进行刷新，就在router.beforeEach中进行调用
  versionCheck();
});

在相应的环境（.env、.env.dev、.env.pro）里面添加版本参数

VITE__APP_VERSION__ = ''

2、webpack中添加versionUpdatePlugin插件

主要是部分项目vue2使用的vue.config，里面的打包工具用的webpack，为了兼容旧项目，增加了插件进行打包。
在/src/utils中添加versionUpdatePlugin.js插件

//简易版
// versionUpdatePlugin.js

const fs = require("fs");
const path = require("path");

const writeVersion = (versionFileName, content) => {
  // 写入文件
  fs.writeFile(versionFileName, content, (err) => {
    if (err) throw err;
  });
};

function versionUpdatePlugin(options) {
  this.options = options;
}

versionUpdatePlugin.prototype.apply = function (compiler) {
  console.log(compiler, "done", this.options);
  compiler.plugin("done", () => {
    let config = { publicDir: compiler.options.output.path };
    // 生成版本信息文件路径
    const file = config.publicDir + path.sep + "version.json";
    // 这里使用编译时间作为版本信息
    const content = JSON.stringify({ version: this.options.version });
    if (fs.existsSync(config.publicDir)) {
      writeVersion(file, content);
    } else {
      fs.mkdir(config.publicDir, (err) => {
        if (err) throw err;
        writeVersion(file, content);
      });
    }
  });
};

module.exports = versionUpdatePlugin;

在vue.config中添加

const versionUpdatePlugin = require("./src/utils/versionUpdatePlugin");
let timeStamp = new Date().getTime();

module.exports = {
  ...
  configureWebpack: (config) => {
    if(process.env.NODE_ENV === "development"){
      const plugins = [];
      // 版本
      plugins.push(
        new versionUpdatePlugin({
          version: timeStamp,
        })
      );
    }
  config.plugins = [...config.plugins, ...plugins];
  },
  chainWebpack(config) {
    config.plugin('define').tap(args => {
      args[0]['process.env'].APP_VERSION = `${timeStamp}`;
      return args
    });
  }
}

在/src/router/index.js中添加

import axios from "axios";
// 版本监控
const versionCheck = async () => {
  console.log('build time:', process.env.APP_VERSION, process.env.NODE_ENV === "development");
  if (process.env.NODE_ENV == "development") return
  const response = await axios.get('version.json')
  // eslint-disable-next-line no-undef
  if (process.env.APP_VERSION !== response.data.version) {
    window.location.reload()
  }
}

router.beforeEach((to, from, next) => {
  next();
  versionCheck();
});

以上2种方法会在遇到版本不同时进行页面自动刷新。

附录：
https://blog.csdn.net/qq_39448719/article/details/106369224
https://blog.csdn.net/qwe134133987/article/details/127979312