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"

2. 新建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)
}

3. 打包时执行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