vue项目打包时自动更新版本号的实现方法
作者：像素检测仪
本文主要介绍了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 打包时自动更新版本号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！