执行npm run build时保存Git元数据的最佳实践咨询

1. 用Vue CLI插件快速实现（适用于Vue CLI项目） #

如果你的项目基于Vue CLI创建，直接用vue-cli-plugin-git-version插件就能快速搞定，无需自己写复杂脚本：

• 安装依赖：npm install vue-cli-plugin-git-version --save-dev
• 在vue.config.js中添加配置，指定输出文件和需要的元数据：

module.exports = {
  pluginOptions: {
    gitVersion: {
      outputFile: 'dist/git-meta.json', // 输出到dist目录的文件路径
      meta: [
        'hash', // 完整提交哈希
        'shortHash', // 短哈希
        'date', // 提交日期
        'message', // 提交消息
        'branch' // 当前分支
      ]
    }
  }
}

之后执行npm run build，dist目录下会自动生成包含指定Git信息的git-meta.json文件。

2. 用git-rev-sync自定义生成（灵活度更高） #

如果需要定制输出格式，或者项目不是Vue CLI创建的，用git-rev-sync库写个简单Node脚本更合适：

• 安装依赖：npm install git-rev-sync --save-dev
• 在项目根目录新建scripts/generate-git-meta.js脚本：

const fs = require('fs');
const path = require('path');
const gitRev = require('git-rev-sync');

try {
  const gitMeta = {
    commitHash: gitRev.long(),
    shortCommitHash: gitRev.short(),
    commitDate: gitRev.date().toISOString(),
    commitMessage: gitRev.message().trim(),
    branch: gitRev.branch()
  };

  const distDir = path.join(__dirname, '../dist');
  // 确保dist目录存在（避免build前执行脚本时目录未创建）
  if (!fs.existsSync(distDir)) {
    fs.mkdirSync(distDir, { recursive: true });
  }

  fs.writeFileSync(
    path.join(distDir, 'git-meta.json'),
    JSON.stringify(gitMeta, null, 2)
  );
  console.log('Git metadata generated successfully');
} catch (err) {
  console.error('Failed to generate Git metadata:', err);
}

• 修改package.json的build命令，让脚本在build前执行：

{
  "scripts": {
    "prebuild": "node scripts/generate-git-meta.js",
    "build": "vue-cli-service build" // 替换成你实际的build命令
  }
}

3. 无依赖纯npm脚本方案（适合不想加额外依赖的场景） #

如果不想引入新依赖，直接用Git命令和npm脚本就能实现，把以下命令加到package.json的prebuild脚本中：

{
  "scripts": {
    "prebuild": "echo '{\"commitHash\":\"$(git rev-parse HEAD)\",\"commitDate\":\"$(git show -s --format=%ci HEAD)\",\"commitMessage\":\"$(git log -1 --pretty=%B HEAD | tr -d '\\n')\",\"branch\":\"$(git rev-parse --abbrev-ref HEAD)\"}' > dist/git-meta.json",
    "build": "vue-cli-service build"
  }
}

注意：这个方案在Windows环境下可能需要用Git Bash或WSL执行，或者借助cross-env处理跨平台兼容问题。

最佳实践提醒 #

• 把生成的git-meta.json（或你指定的文件名）加入.gitignore，避免把自动生成的文件提交到Git仓库
• 如果需要在应用内展示这些元数据（比如“关于”页面），可以直接在代码中读取dist目录下的json文件，或者在build时把元数据注入到环境变量中

内容的提问来源于stack exchange，提问作者droomoord