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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要介紹了vue如何實現(xiàn)在線編輯excel問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue getter setter，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
利用vue.js實現(xiàn)被選中狀態(tài)的改變方法
下面小編就為大家分享一篇利用vue.js實現(xiàn)被選中狀態(tài)的改變方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解
這篇文章主要為大家介紹了vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue2前端調(diào)用WebSocket有消息進行通知代碼示例
在Vue項目中實現(xiàn)全局的消息鏈接監(jiān)聽主要涉及到了WebSocket技術,這是一種雙向通信協(xié)議,允許客戶端與服務器之間實時、高效地交換數(shù)據(jù),這篇文章主要給大家介紹了關于vue2前端調(diào)用WebSocket有消息進行通知的相關資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue項目多路由表頭吸頂實現(xiàn)的幾種布局方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
在封裝第三方組件中,經(jīng)常會遇到一個問題,下面這篇文章主要給大家介紹了關于如何在vue中更優(yōu)雅的封裝第三方組件的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要為大家介紹了深入剖析vite到底是快還是慢原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了vue中的路由跳轉tabBar圖片和文字的高亮效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue如何使用模擬的json數(shù)據(jù)查看效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03