vue項(xiàng)目打包時(shí)自動更新版本號的實(shí)現(xiàn)方法
更新時(shí)間：2025年02月13日 09:52:48 作者：像素檢測儀
本文主要介紹了vue項(xiàng)目打包時(shí)自動更新版本號的實(shí)現(xiàn)方法,通過在根目錄下創(chuàng)建autoVersion.js腳本文件,頁面獲取版本號時(shí)直接使用,修改package.json配置,感興趣的可以了解一下
前言
頁面中會顯示當(dāng)前版本號，每次更新需要手動更改版本號會很麻煩，現(xiàn)在是每次npm run build時(shí)會自動更新版本號，更新規(guī)律自己定義。
TODO：沒有區(qū)分開發(fā)環(huán)境、測試環(huán)境、正式環(huán)境
創(chuàng)建自動更新版本腳本
在根目錄下創(chuàng)建autoVersion.js腳本文件
const fs = require('fs')
const path = require('path')
// 讀取 package.json 中的版本號
const packageJsonPath = path.resolve(__dirname, 'package.json')
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
let version = packageJson.version
// 分割版本號并遞增
let [major, minor, patch] = version.split('.').map(Number)
patch++ // 遞增補(bǔ)丁版本號
// if (patch >= 10) {
// patch = 0
// minor++
// if (minor >= 10) {
// minor = 0
// major++
// }
// }
// 更新版本號
version = `${major}.${minor}.${patch}`
// 定義環(huán)境變量內(nèi)容，如果.env里面有其他配置要一起寫進(jìn)去
const envContent = `VITE_APP_VERSION = ${version}`
// 寫入 .env 文件
const envPath = path.resolve(__dirname, '.env')
fs.writeFileSync(envPath, envContent, 'utf-8')
// 更新 package.json 中的版本號
packageJson.version = version
// 將更新后的 package.json 寫回文件
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf-8')
console.log(`版本號更新為: ${version}`)
頁面獲取版本號
在需要用到版本號的地方直接使用
const version = import.meta.env.VITE_APP_VERSION
修改package.json配置
修改build打包，新增autoVersion
"build": "npm run autoVersion && vite build",
"autoVersion": "node autoVersion.js"到此這篇關(guān)于vue項(xiàng)目打包時(shí)自動更新版本號的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue 打包時(shí)自動更新版本號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟
本文主要介紹了vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue滾動軸插件better-scroll的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
在項(xiàng)目中經(jīng)常有一些場景會連續(xù)發(fā)送多個(gè)請求,而異步會導(dǎo)致最后得到的結(jié)果不是我們想要的,并且對性能也有非常大的影響,這篇文章主要給大家介紹了關(guān)于axios取消請求與避免重復(fù)請求的相關(guān)資料,需要的朋友可以參考下2021-06-06
最近遇到這樣的需求輸入連號事件,需要在表格中輸入物流單號,物流號碼,生成的數(shù)量,名稱,點(diǎn)擊確定自動生成固定數(shù)量的連號物流單號,本文重點(diǎn)介紹vue3輸入單號和張數(shù),自動生成連號的單號,感興趣的朋友一起看看吧2024-02-02
使用 vue 實(shí)例更好的監(jiān)聽事件及vue實(shí)例的方法
這篇文章主要介紹了使用 vue 實(shí)例更好的監(jiān)聽事件及vue實(shí)例的方法,介紹了一種新增 vue 實(shí)例的方法，單獨(dú)監(jiān)聽事件，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
解決vue腳手架項(xiàng)目打包后路由視圖不顯示的問題
今天小編就為大家分享一篇解決vue腳手架項(xiàng)目打包后路由視圖不顯示的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue用復(fù)選框?qū)崿F(xiàn)組件且支持單選和多選操作方式
這篇文章主要介紹了vue用復(fù)選框?qū)崿F(xiàn)組件且支持單選和多選操作方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
今天小編就為大家分享一篇在Vue組件中獲取全局的點(diǎn)擊事件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍
后臺項(xiàng)目想使用時(shí)間選擇器選擇一段時(shí)間進(jìn)行數(shù)據(jù)篩選,所以下面這篇文章主要給大家介紹了關(guān)于Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11