Vue项目跟踪Git Commit信息

如果我们的项目需要在多个现场部署,那版本控制和持续集成是非常重要的环节。我们需要明确的知道每个现场部署的是哪个版本,这样出问题之后,就可以及时定位bug。
Git作为最流行的版本控制工具,commit message 中包含了代码提交的详细信息。在Vue项目打包时,将这些Git commit信息嵌入到打包后的文件中,这样便能更好地追踪代码版本和变更历史。本文将详细介绍如何在Vue项目中获取Git commit信息,并将其输出到打包后的指定文件夹中。

  1. 准备工作
    首先,确保你的Vue项目已经初始化并使用了Git进行版本控制。如果还没有,可以通过以下命令初始化Git:
git init
git add .
git commit -m "Initial commit"
  1. 新建version.js文件
    version.js文件是用来获取git commit 的一些信息,并且将其写入打包后的文件中:
const execSync = require('node:child_process').execSync
const fs = require('node:fs')
// 读取package.json文件
const data = fs.readFileSync('./package.json')
const packageData = JSON.parse(data)
// 获取git信息的相关命令
const COMMITHASH_COMMAND = 'rev-parse HEAD'
const VERSION_COMMAND = 'describe --always'
const BRANCH_COMMAND = 'rev-parse --abbrev-ref HEAD'
const NEW_COMMIT_MESSAGE = 'log -1 --pretty=%B'
const COMMIT_TIME = 'show -s --format=%cd'
try {
const d = new Date()
const commitId = execSync(`git ${COMMITHASH_COMMAND}`).toString().trim()
const branch = execSync(`git ${BRANCH_COMMAND}`).toString().trim()
const release = execSync(`git ${VERSION_COMMAND}`).toString().trim()
const commitMessage = execSync(`git ${NEW_COMMIT_MESSAGE}`).toString().trim()
const commitTime = execSync(`git ${COMMIT_TIME}`).toString().trim()
const versionStr = `
COMMIT_ID = ${commitId}
BRANCH = ${branch}
RELEASE = ${release}
COMMIT_MESSAGE = ${commitMessage}
COMMIT_TIME = ${commitTime}
PACKING_TIME = ${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}
VERSION = ${packageData.version}
`
fs.writeFileSync(`dist/release`, versionStr)
} catch (e) {
throw new Error(e)
}
  1. 打包时执行version.js文件
    我们需要在每次打包时执行这个文件,这样每次打包之后就会包含一个release文件在打包文件中,可以供我们后续查看追踪。
    在package.json文件中需要进行以下配置:
"scripts": {
"build": "vue-tsc --noEmit && vite build && node version.js"
},

最后执行npm run build
我们来看一下打包文件目录:
image

release文件中的内容如下:

COMMIT_ID = 985846087932f83d630188fccfd72e3472d2c614
BRANCH = master
RELEASE = 9858460
COMMIT_MESSAGE = feat: 页面隐藏菜单
COMMIT_TIME = Wed Feb 19 19:43:38 2025 +0800
PACKING_TIME = 2025-2-20 10:56
VERSION = 1.0.0
posted @   icon-icon  阅读(10)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示