如果我们的项目需要在多个现场部署,那版本控制和持续集成是非常重要的环节。我们需要明确的知道每个现场部署的是哪个版本,这样出问题之后,就可以及时定位bug。
Git作为最流行的版本控制工具,commit message 中包含了代码提交的详细信息。在Vue项目打包时,将这些Git commit信息嵌入到打包后的文件中,这样便能更好地追踪代码版本和变更历史。本文将详细介绍如何在Vue项目中获取Git commit信息,并将其输出到打包后的指定文件夹中。
- 准备工作
首先,确保你的Vue项目已经初始化并使用了Git进行版本控制。如果还没有,可以通过以下命令初始化Git:
| git init |
| git add . |
| git commit -m "Initial commit" |
- 新建version.js文件
version.js文件是用来获取git commit 的一些信息,并且将其写入打包后的文件中:
| const execSync = require('node:child_process').execSync |
| const fs = require('node:fs') |
| |
| |
| const data = fs.readFileSync('./package.json') |
| const packageData = JSON.parse(data) |
| |
| |
| 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) |
| } |
| |
- 打包时执行version.js文件
我们需要在每次打包时执行这个文件,这样每次打包之后就会包含一个release文件在打包文件中,可以供我们后续查看追踪。
在package.json文件中需要进行以下配置:
| "scripts": { |
| "build": "vue-tsc --noEmit && vite build && node version.js" |
| }, |
最后执行npm run build
我们来看一下打包文件目录:

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 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~