vue項目打包自動更新版本號且自動刷新緩存的方法示例

更新時間：2024年11月23日 15:26:59 作者：Faaaaaaq

這篇文章主要給大家介紹了關于vue項目打包自動更新版本號且自動刷新緩存的相關資料,文中通過代碼及圖文介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下

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配置基礎版本號

繼續(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)
}