vue项目打包自动更新版本号且自动刷新缓存的方法示例
作者：Faaaaaaq
这篇文章主要给大家介绍了关于vue项目打包自动更新版本号且自动刷新缓存的相关资料,文中通过代码及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
在项目根目录创建一个 version.js 文件!
const fs = require('fs');
const path = './package.json';
function getPackageJson() {
return JSON.parse(fs.readFileSync(path));
}
try {
let packageJson = getPackageJson();
let version = packageJson.version;
// 去除前缀 v
if (version.startsWith('v')) {
version = version.slice(1);
}
let arr = version.split('.').map(item => {
let num = Number(item);
if (isNaN(num)) {
throw new Error(`Invalid version number part: ${item}`);
}
return num;
});
if (arr[2] < 9) {
arr[2] += 1;
} else if (arr[1] < 9) {
arr[1] += 1;
arr[2] = 0;
} else {
arr[0] += 1;
arr[1] = 0;
arr[2] = 0;
}
const newVersion = 'v' + arr.join('.');
packageJson.version = newVersion;
fs.writeFileSync(path, JSON.stringify(packageJson, null, 2));
console.log(`Version updated to ${newVersion}`);
} catch (error) {
console.error('Failed to update package.json:', error);
process.exit(1);
}
在项目package.json配置基础版本号
继续在package.json文件的打包命令里添加执行version代码
可以先到运行serve里面添加执行version代码查看package.json里的版本号是否生效
main.js里面添加清除缓存，刷新代码；简单粗暴
const version = require('../package.json').version
const versionStorage = localStorage.getItem('version')
if (version != versionStorage) {
localStorage.clear()
localStorage.setItem('version', version)
setTimeout(() => {
window.location.reload(true)
}, 500)
}总结
到此这篇关于vue项目打包自动更新版本号且自动刷新缓存的文章就介绍到这了,更多相关vue项目打包自动更新版本号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！