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 打包时自动更新版本号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vite+vue3项目初始化搭建的实现步骤

    vite+vue3项目初始化搭建的实现步骤

    本文主要介绍了vite+vue3项目初始化搭建的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-07-07
  • vue滚动轴插件better-scroll使用详解

    vue滚动轴插件better-scroll使用详解

    这篇文章主要为大家详细介绍了vue滚动轴插件better-scroll的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • axios取消请求与避免重复请求

    axios取消请求与避免重复请求

    在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响,这篇文章主要给大家介绍了关于axios取消请求与避免重复请求的相关资料,需要的朋友可以参考下
    2021-06-06
  • vue3输入单号和张数如何自动生成连号的单号

    vue3输入单号和张数如何自动生成连号的单号

    最近遇到这样的需求输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号,本文重点介绍vue3输入单号和张数,自动生成连号的单号,感兴趣的朋友一起看看吧
    2024-02-02
  • 使用 vue 实例更好的监听事件及vue实例的方法

    使用 vue 实例更好的监听事件及vue实例的方法

    这篇文章主要介绍了使用 vue 实例更好的监听事件及vue实例的方法,介绍了一种新增 vue 实例的方法,单独监听事件,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 解决vue脚手架项目打包后路由视图不显示的问题

    解决vue脚手架项目打包后路由视图不显示的问题

    今天小编就为大家分享一篇解决vue脚手架项目打包后路由视图不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue用复选框实现组件且支持单选和多选操作方式

    vue用复选框实现组件且支持单选和多选操作方式

    这篇文章主要介绍了vue用复选框实现组件且支持单选和多选操作方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 在Vue组件中获取全局的点击事件方法

    在Vue组件中获取全局的点击事件方法

    今天小编就为大家分享一篇在Vue组件中获取全局的点击事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue实现跑马灯效果

    Vue实现跑马灯效果

    这篇文章主要为大家详细介绍了Vue实现跑马灯效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Vue2中Element DatePicker组件设置默认日期及控制日期范围

    Vue2中Element DatePicker组件设置默认日期及控制日期范围

    后台项目想使用时间选择器选择一段时间进行数据筛选,所以下面这篇文章主要给大家介绍了关于Vue2中Element DatePicker组件设置默认日期及控制日期范围的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11

最新评论