vue項(xiàng)目打包時(shí)自動(dòng)更新版本號(hào)的實(shí)現(xiàn)方法
更新時(shí)間：2025年02月13日 09:52:48 作者：像素檢測(cè)儀
本文主要介紹了vue項(xiàng)目打包時(shí)自動(dòng)更新版本號(hào)的實(shí)現(xiàn)方法,通過(guò)在根目錄下創(chuàng)建autoVersion.js腳本文件,頁(yè)面獲取版本號(hào)時(shí)直接使用,修改package.json配置,感興趣的可以了解一下
前言
頁(yè)面中會(huì)顯示當(dāng)前版本號(hào)，每次更新需要手動(dòng)更改版本號(hào)會(huì)很麻煩，現(xiàn)在是每次npm run build時(shí)會(huì)自動(dòng)更新版本號(hào)，更新規(guī)律自己定義。
TODO：沒(méi)有區(qū)分開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境、正式環(huán)境
創(chuàng)建自動(dòng)更新版本腳本
在根目錄下創(chuàng)建autoVersion.js腳本文件
const fs = require('fs')
const path = require('path')
// 讀取 package.json 中的版本號(hào)
const packageJsonPath = path.resolve(__dirname, 'package.json')
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
let version = packageJson.version
// 分割版本號(hào)并遞增
let [major, minor, patch] = version.split('.').map(Number)
patch++ // 遞增補(bǔ)丁版本號(hào)
// if (patch >= 10) {
// patch = 0
// minor++
// if (minor >= 10) {
// minor = 0
// major++
// }
// }
// 更新版本號(hào)
version = `${major}.${minor}.${patch}`
// 定義環(huán)境變量?jī)?nèi)容，如果.env里面有其他配置要一起寫(xiě)進(jìn)去
const envContent = `VITE_APP_VERSION = ${version}`
// 寫(xiě)入 .env 文件
const envPath = path.resolve(__dirname, '.env')
fs.writeFileSync(envPath, envContent, 'utf-8')
// 更新 package.json 中的版本號(hào)
packageJson.version = version
// 將更新后的 package.json 寫(xiě)回文件
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf-8')
console.log(`版本號(hào)更新為: ${version}`)
頁(yè)面獲取版本號(hào)
在需要用到版本號(hào)的地方直接使用
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í)自動(dòng)更新版本號(hào)的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue 打包時(shí)自動(dòng)更新版本號(hào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue如何實(shí)現(xiàn)在線編輯excel問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue getter setter，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
利用vue.js實(shí)現(xiàn)被選中狀態(tài)的改變方法
下面小編就為大家分享一篇利用vue.js實(shí)現(xiàn)被選中狀態(tài)的改變方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁(yè)面示例詳解
這篇文章主要為大家介紹了vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁(yè)面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue2前端調(diào)用WebSocket有消息進(jìn)行通知代碼示例
在Vue項(xiàng)目中實(shí)現(xiàn)全局的消息鏈接監(jiān)聽(tīng)主要涉及到了WebSocket技術(shù),這是一種雙向通信協(xié)議,允許客戶(hù)端與服務(wù)器之間實(shí)時(shí)、高效地交換數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue2前端調(diào)用WebSocket有消息進(jìn)行通知的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue中多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式
這篇文章主要介紹了vue項(xiàng)目多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
在封裝第三方組件中,經(jīng)常會(huì)遇到一個(gè)問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于如何在vue中更優(yōu)雅的封裝第三方組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要為大家介紹了深入剖析vite到底是快還是慢原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果
這篇文章主要介紹了vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue如何使用模擬的json數(shù)據(jù)查看效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03