Vite4TSX前端版本号生成
在做基于Vite和React16的项目时，需要前端做版本号管理，当有新版本上线后友好提示客户更新;
1 编写版本号生成插件
- 根目录新建vite-plugin-version.ts 文件；
新手建议使用buildStart()内封装方法，
如果觉得每次编译后本地也提示版本升级会很麻烦；
就使用closeBundle()但要写死指定目录;
import fs from 'fs';
import path from 'path';
export default function vitePluginVersion() {
const config = {
publicDir: ''
}
return {
name: 'vite-plugin-version',
configResolved(resolvedConfig: any) {
config.publicDir = resolvedConfig.publicDir
},
// 编译前执行回调
buildStart() {
/* 大致的意思就是找到存放静态资源的目录，然后新建version.json
利用编译后静态资源会复制到dist目录下面的逻辑, 来达到目的;
优点是：灵活，哪怕你是自定义输出目录页也不用担心
缺点是:每次编译静态文件里面的version.json版本号都会边,也就是每次本地运行都会弹窗要更新版本;
*/
const file = config.publicDir + path.sep + "version.json";
const content = JSON.stringify({ version: new Date().getTime() });
if (fs.existsSync(config.publicDir)) {
fs.writeFileSync(file, content, 'utf8');
} else {
fs.mkdir(config.publicDir, { recursive: true }, (err: any) => {
if (err) {
console.error('创建目录失败:', err);
} else {
fs.writeFileSync(file, content, 'utf8');
}
});
}
},
// 编译后执行回调
closeBundle() {
/*
这个是编译后的执行回调: 如果在这里使用的话：
逻辑1：编译完毕后生成一个version.json到,你指定的dist文件夹;如果不自定义输出文件夹,直接写死也不错;
逻辑2: 加判断,判断静态文件夹是否有version.json文件;如果没有顺便新建一个; 然后单独在dist文件夹输出version.json;
优点是: 项目已经成功编译了,最后做这件事; 本地静态文件version.json生成一次后续不在重新生成;
缺点是:每次都要判断静态文件夹是否有, version.json;
*/
// 创建version.json文件内容
// const content = JSON.stringify({ version: new Date().getTime() });
// 指定输出文件路径第二种方法
// const outputPath = path.join(process.cwd(), 'dist', 'version.json');
// const outputPath = path.resolve(__dirname, 'dist', 'version.json');
// 写入文件
// fs.writeFileSync(outputPath, content, 'utf8');
// 判断静态文件目录是否存在,不存在就给它生成一个
// const publicVersionPath = path.join(__dirname, 'public', 'version.json');
// if (!fs.existsSync(publicVersionPath)) {
// fs.writeFileSync(publicVersionPath, content, 'utf8');
// };
}
};
}
2.使用插件
打开vite.config.ts文件
import vitePluginVersion from './vite-plugin-version'
export default defineConfig({
plugins: [
vitePluginVersion(),
]
})
3.编写请求获取版本号方法fetchVersionJson.ts
// 引入第三方localStore存储插件
import storejs from 'storejs';
function fetchBuildVersion() {
return new Promise((resolve, reject) => {
fetch('./version.json', {
cache: 'no-cache', // 禁用缓存
}).then(response => {
if (response.status === 404) {
reject({code: 0, message: `文件找不到`});
return;
}
// 检查响应状态
if (!response.ok) {
// 如果响应状态码不是ok，我们认为文件不存在
reject({code: 0, message: `${response.statusText}`});
return;
}
resolve(response.json());
}).catch(error => {
// 网络请求错误处理
return reject({code: 0, message: '获取version.json时发生错误'});
});
});
}
// 最后一次查询时间
let lastFetchTime = 0;
export function HandleGetSoftVersionCode() {
const currentTime = Date.now();
// 避免接口密集频繁触发,设置为5秒内只触发1次
if (currentTime - lastFetchTime < 5000) {
// return reject({code: 0, message: '请求太频繁, 5秒内只能请求一次'});
return;
}
lastFetchTime = currentTime;
// 获取本地版本
const currLocalVerCode = storejs.get('YYH_Version');
throttledFetchVersion().then((data: any) => {
const {version} = data;
// 表示版本号一致
if (currLocalVerCode === version) {
return;
} else {
// 版本号不一致, 弹窗提示用户更新
}
}).catch((error) => {
// 表示不是最新版本, 直接提示用户刷新页面获取
if (error.message === '文件找不到') {
// 文件找不到, 弹窗提示用户更新
};
});
}
4.在Axios全局请求的时候的时候，调用封装方法和本地存储的版本号是否一致;
// 导入获取版本方法
import {HandleGetSoftVersionCode} from './fetchVersionJson';
import axios from "axios";
const service = axios.create({
timeout: 120 * 1000
});
const request = (config: any) => {
return new Promise((resolve, reject) => {
/* 这里可以调用获取版本方法；
* 还可以排除登陆url，当是登陆的话就不调用获取版本方法;
* if (config.url !== 'user/login') {};
*/
HandleGetSoftVersionCode();
service(config).then((res) => {
resolve(res);
}).catch((err) => {
reject(err);
});
});
});
export default request;
5.如果不一致就弹窗提示用户更新版本；
// 引入第三方localStore存储插件
import storejs from 'storejs';
// 点击确定存入最新版本，并刷新页面
storejs.set('YYH_Version', '123456789');
location.reload();
原文地址：https://blog.csdn.net/u014708123/article/details/140381998
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！