vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的方法示例
更新時(shí)間：2024年11月23日 15:26:59 作者：Faaaaaaq
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的相關(guān)資料,文中通過(guò)代碼及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
在項(xiàng)目根目錄創(chuàng)建一個(gè) 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);
}
在項(xiàng)目package.json配置基礎(chǔ)版本號(hào)
繼續(xù)在package.json文件的打包命令里添加執(zhí)行version代碼
可以先到運(yùn)行serve里面添加執(zhí)行version代碼查看package.json里的版本號(hào)是否生效
main.js里面添加清除緩存，刷新代碼；簡(jiǎn)單粗暴
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項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的文章就介紹到這了,更多相關(guān)vue項(xiàng)目打包自動(dòng)更新版本號(hào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue登錄頁(yè)面回車(chē)執(zhí)行事件@keyup.enter.native問(wèn)題
這篇文章主要介紹了vue登錄頁(yè)面回車(chē)執(zhí)行事件@keyup.enter.native問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
el-form組件清除校驗(yàn)提示正確方法(前端技能提升)
el-form組件提供了表單驗(yàn)證的功能,可以通過(guò)在el-form上綁定rules屬性,并在el-form-item上設(shè)置prop屬性來(lái)進(jìn)行校驗(yàn),這篇文章主要給大家介紹了關(guān)于el-form組件清除校驗(yàn)提示正確方法(前端技能提升)的相關(guān)資料,需要的朋友可以參考下2023-12-12
vue自定義指令實(shí)現(xiàn)僅支持輸入數(shù)字和浮點(diǎn)型的示例
今天小編就為大家分享一篇vue自定義指令實(shí)現(xiàn)僅支持輸入數(shù)字和浮點(diǎn)型的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue?eslint報(bào)錯(cuò)error?"Component?name?"*****"
這篇文章主要給大家介紹了關(guān)于vue?eslint報(bào)錯(cuò)error?“Component?name?“*****“?should?always?be?multi-word”的解決方法,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
在使用 Vue 開(kāi)發(fā)的這幾年里，掌握一些有用的技巧，使用一些更高級(jí)的技術(shù)點(diǎn)，總會(huì)有用的，本文就介紹了15個(gè)Vue技巧，具有一定的參考價(jià)值，感興趣的可以了解一下2022-02-02
本文主要介紹了Vue中使用Lodash的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue iview實(shí)現(xiàn)分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue iview實(shí)現(xiàn)分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue調(diào)用swiper插件步驟教程(最易理解且詳細(xì))
有時(shí)候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過(guò)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)警告的問(wèn)題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文主要介紹了VUE中Non-Props屬性的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05