vue打包更新packge.json版本號(hào)的全過程
VUE項(xiàng)目打包自動(dòng)更新版本號(hào)
此方法只針對(duì) Vue 如果使用其他框架,可以此參照作為參考
一、先看效果

二、創(chuàng)建 buildVersion.js 文件

文件內(nèi)容 目前只針對(duì)3位版本號(hào)
遞增規(guī)則是 每次更新 加一次小版本,10次小版本向前遞增一個(gè)版本。如:1.0.9 遞增后 1.1.0
let fs = require("fs");
const getPackageJson = () => {
// 讀取文件
let data = fs.readFileSync("./package.json");
// 轉(zhuǎn)換為 JSON 對(duì)象
return JSON.parse(data);
};
let packageData = getPackageJson();
const updateVersion = () => {
let version = packageData.version.split(".");
let major = parseInt(version[0]); // 主版本號(hào)
let minor = parseInt(version[1]); // 次版本號(hào)
let patch = parseInt(version[2]); // 小版本號(hào)
// 檢查并更新版本號(hào)
if (patch < 9) {
patch++; // 遞增小版本號(hào)
} else {
patch = 0; // 重置小版本號(hào)
if (minor < 9) {
minor++; // 遞增次版本號(hào)
} else {
minor = 0; // 重置次版本號(hào)
major++; // 遞增主版本號(hào)
}
}
// 更新版本號(hào)
packageData.version = `${major}.${minor}.${patch}`;
// 獲取當(dāng)前日期和時(shí)間
let now = new Date();
let formattedDate = `${now.getFullYear()}-${String(
now.getMonth() + 1
).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")} ${String(
now.getHours()
).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}:${String(
now.getSeconds()
).padStart(2, "0")}`;
// 更新最后打包時(shí)間
packageData.lastBuildTime = formattedDate;
};
updateVersion();
fs.writeFile(
"./package.json",
JSON.stringify(packageData, null, "\t"),
(err) => {
if (err) {
console.log("寫入版本失敗", err);
} else {
console.log("寫入版本成功 " + packageData.version);
}
}
);
三、修改packjson里面,scripts命令
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "node ./buildVersion.js && vue-cli-service build"
}
執(zhí)行npm run build:prod 后自動(dòng)更新version和lastBuildTime

四、在頁面地方使用

到此這篇關(guān)于vue打包更新packge.json版本號(hào)的全過程的文章就介紹到這了,更多相關(guān)vue打包更新packge.json版本號(hào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue.js實(shí)現(xiàn)動(dòng)態(tài)面包屑
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)動(dòng)態(tài)面包屑,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
簡單的vue-resourse獲取json并應(yīng)用到模板示例
本篇文章主要介紹了簡單的vue-resourse獲取json并應(yīng)用到模板示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-02-02
基于VUE.JS的移動(dòng)端框架Mint UI的使用
本篇文章主要介紹了基于VUE.JS的移動(dòng)端框架Mint UI的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
vue3的自定義指令directives實(shí)現(xiàn)
本文主要介紹了vue3的自定義指令directives實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue2.0 根據(jù)狀態(tài)值進(jìn)行樣式的改變展示方法
下面小編就為大家分享一篇vue2.0 根據(jù)狀態(tài)值進(jìn)行樣式的改變展示方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03

