实现思路:
在每次打包的时候生成一个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();
})