vue項目打包自動更新版本號且自動刷新緩存的方法示例
在項目根目錄創(chuàng)建一個 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配置基礎(chǔ)版本號

繼續(xù)在package.json文件的打包命令里添加執(zhí)行version代碼
可以先到運行serve里面添加執(zhí)行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)
}總結(jié)
到此這篇關(guān)于vue項目打包自動更新版本號且自動刷新緩存的文章就介紹到這了,更多相關(guān)vue項目打包自動更新版本號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue登錄頁面回車執(zhí)行事件@keyup.enter.native問題
這篇文章主要介紹了vue登錄頁面回車執(zhí)行事件@keyup.enter.native問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
vue自定義指令實現(xiàn)僅支持輸入數(shù)字和浮點型的示例
今天小編就為大家分享一篇vue自定義指令實現(xiàn)僅支持輸入數(shù)字和浮點型的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue?eslint報錯error?"Component?name?"*****"
這篇文章主要給大家介紹了關(guān)于vue?eslint報錯error?“Component?name?“*****“?should?always?be?multi-word”的解決方法,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue調(diào)用swiper插件步驟教程(最易理解且詳細(xì))
有時候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過npm安裝,從而進(jìn)行統(tǒng)一安裝包管理,下面這篇文章主要給大家介紹了關(guān)于vue調(diào)用swiper插件的相關(guān)資料,需要的朋友可以參考下2023-04-04
解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09

