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