vue项目打包时自动更新版本号的实现方法

 更新时间:2025年02月13日 09:52:48   作者:像素检测仪  
本文主要介绍了vue项目打包时自动更新版本号的实现方法,通过在根目录下创建autoVersion.js脚本文件,页面获取版本号时直接使用,修改package.json配置,感兴趣的可以了解一下

前言

页面中会显示当前版本号,每次更新需要手动更改版本号会很麻烦,现在是每次npm run build时会自动更新版本号,更新规律自己定义。

TODO:没有区分开发环境、测试环境、正式环境

创建自动更新版本脚本

在根目录下创建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}`

// 定义环境变量内容,如果.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项目打包时自动更新版本号的实现方法的文章就介绍到这了,更多相关vue 打包时自动更新版本号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue如何实现在线编辑excel

    vue如何实现在线编辑excel

    这篇文章主要介绍了vue如何实现在线编辑excel问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue 理解之白话 getter/setter详解

    Vue 理解之白话 getter/setter详解

    这篇文章主要介绍了Vue getter setter,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 利用vue.js实现被选中状态的改变方法

    利用vue.js实现被选中状态的改变方法

    下面小编就为大家分享一篇利用vue.js实现被选中状态的改变方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue+three.js实现炫酷的3D登陆页面示例详解

    vue+three.js实现炫酷的3D登陆页面示例详解

    这篇文章主要为大家介绍了vue+three.js实现炫酷的3D登陆页面示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue2前端调用WebSocket有消息进行通知代码示例

    vue2前端调用WebSocket有消息进行通知代码示例

    在Vue项目中实现全局的消息链接监听主要涉及到了WebSocket技术,这是一种双向通信协议,允许客户端与服务器之间实时、高效地交换数据,这篇文章主要给大家介绍了关于vue2前端调用WebSocket有消息进行通知的相关资料,需要的朋友可以参考下
    2024-07-07
  • vue中多路由表头吸顶实现的几种布局方式

    vue中多路由表头吸顶实现的几种布局方式

    这篇文章主要介绍了vue项目多路由表头吸顶实现的几种布局方式,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 如何在vue中更优雅的封装第三方组件详解

    如何在vue中更优雅的封装第三方组件详解

    在封装第三方组件中,经常会遇到一个问题,下面这篇文章主要给大家介绍了关于如何在vue中更优雅的封装第三方组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 深入剖析vite到底是快还是慢原理详解

    深入剖析vite到底是快还是慢原理详解

    这篇文章主要为大家介绍了深入剖析vite到底是快还是慢原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue中的路由跳转tabBar图片和文字的高亮效果

    vue中的路由跳转tabBar图片和文字的高亮效果

    这篇文章主要介绍了vue中的路由跳转tabBar图片和文字的高亮效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue如何使用模拟的json数据查看效果

    vue如何使用模拟的json数据查看效果

    这篇文章主要介绍了vue如何使用模拟的json数据查看效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论