Vite+Vue3实现版本更新检查，实现页面自动刷新

实现思路：

在每次打包的时候生成一个version.json版本信息文件，在页面跳转的时候请求服务端的version.json的版本号和浏览器本地的版本号对比，进行监控版本的迭代更新，并对页面进行刷新

1、使用Vite插件打包自动生成版本信息

2、Vite.config.ts配置

3、路由配置

1. 使用Vite插件打包自动生成版本信息

utils文件下新建versionUpdatePlugin.ts文件

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 defineConfig(({ mode }: ConfigEnv): UserConfig => {
	    const CurrentTimeVersion = new Date().getTime();

    	return {
		    define: {
			    // 定义全局变量
			    "process.env.VITE__APP_VERSION__": CurrentTimeVersion
		    },
            plugins: [
                // 版本更新插件
			    versionUpdatePlugin({
				    version: CurrentTimeVersion
			    })
            ]
        }
	};
});

3. 路由配置

utils文件下新建versionCheck.ts文件

import { ElMessageBox } from "element-plus";
import axios from "axios";

// 版本检查
export const versionCheck = async () => {
	const response = await axios.get("version.json");
	//process.env.VITE__APP_VERSION__  获取环境变量设置的值，判断是否与生成的版本信息一致
	if (process.env.VITE__APP_VERSION__ !== response.data.version) {
		ElMessageBox.confirm(`检测到新版本，更新之后将能体验到更多好用的功能，是否现在更新？`, "版本更新提示", {
			confirmButtonText: "更新",
			type: "warning",
			showCancelButton: false,
			draggable: true
		}).then(async () => {
			window.location.reload();
		});
	}
};

import { versionCheck } from "@/utils/versionCheck";

router.beforeEach(async (to, from, next) => {
	// 检查版本
	await versionCheck();
})