vue项目打包获取git commit信息并输出到打包后的指定文件夹中

需求背景:
前端项目经常打包,发包部署,为了方便测试及运维发现问题时与正确commit信息对比
实现方式:
使用Node.js的child_process模块来执行git命令
实现步骤:
1.在package.json的同级目录下新建一个version.js文件。内容可根据自己的实际需求来定,

const execSync = require('child_process').execSync;
const fs = require('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}

      CommitMessage: ${commitMessage}

      CommitTime: ${commitTime}

      PackingTime: ${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}

      Version: ${packageData.version}
  `;

  fs.writeFileSync(`dist/version.txt`, versionStr);
} catch (e) {
  throw new Error(e);
}

2.修改package.json的打包脚本:
在这里插入图片描述
3.使用npm run build:prod进行打包会输出version.txt文件在dist目录下
详情如下:
在这里插入图片描述

ps:
在浏览器环境下直接执行 Node.js 的 child_process 模块是不可行的,因为浏览器环境无法直接访问操作系统的命令行

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
创建完Vue项目后,如果想要自动连接到Git,可以按照以下步骤进行操作: 1. 在项目文件夹打开命令行工具(如cmd或Git Bash)。 2. 输入以下命令来配置Git的用户名和邮箱: ``` git config --global user.name "用户名" git config --global user.email "邮箱" ``` 3. 执行以下命令来初始化Git仓库: ``` git init ``` 4. 使用以下命令将所有文件添加到Git的暂存区: ``` git add . ``` 5. 执行以下命令来提交代码到本地仓库,并添加描述信息: ``` git commit -m "描述信息" ``` 6. 如果还没有创建远程仓库,可以在Git平台上创建一个新的仓库,并获取远程仓库地址。 7. 使用以下命令将本地仓库与远程仓库关联起来: ``` git remote add origin 远程仓库地址 ``` 8. 最后,执行以下命令将本地代码推送到远程仓库的主分支: ``` git push origin master ``` 这样,你的Vue项目就会自动连接到Git,并将代码推送到远程仓库的主分支。 #### 引用[.reference_title] - *1* *2* [本地vue项目连接远程仓库](https://blog.csdn.net/weixin_61032994/article/details/124898313)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue新建项目+git托管+初始配置+项目打包优化](https://blog.csdn.net/qq_41550143/article/details/129150254)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值