vue 使用 git-rev-sync 确定线上发布版本号

vue 使用 git-rev-sync 确定线上发布版本号

场景

目前公司仍然没有做 CI 持续集成,而是使用手动方式(脚本)部署项目。有时候,已经修改了代码,而线上(测试环境)却还没有部署,导致测试人员认为问题仍然没有修复。那么,怎么确定线上部署的代码版本呢?难道是打开线上网站查看某个功能是否完成了么?有没有更高效的方法呢?
吾辈找到的解决方案便是 git-rev-sync

简介

官网描述只有一句话: 同步获取当前的 git commit 哈希,标签,计数,分支或提交消息。从 git-rev 分叉。
实际上就是一个同步获取当前 git commit 最新提交的一些信息,而我们可以将它挂载到 window 对象上,方便线上快速确定发布代码的版本。

步骤

安装

1
yarn add -D git-rev-sync

在 vue 打包文件中读取 git 信息

只有在打包时我们才能读取到 git 信息(本地 nodejs 运行),而我们读取完之后不能直接挂载到 window 对象上,因为打包时处于 nodejs 环境,window 对象并不存在,这时候就需要用到 Vue 提供的环境变量功能了。

引用
Vue Cli 在客户端侧代码中使用环境变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// vue.config.js
const git = require('git-rev-sync')

/**
* 传递打包时的环境变量到前端必须是以 VUE_APP_ 开头且必须只能是字符串
* @type {string}
*/
process.env.VUE_APP_GIT = JSON.stringify({
short: git.short(),
long: git.long(),
branch: git.branch(),
count: git.count(),
date: git.date(),
isDirty: git.isDirty(),
isTagDirty: git.isTagDirty(),
message: git.message(),
remoteUrl: git.remoteUrl(),
tag: git.tag(),
})

在 main.js 中读取环境变量并挂载到 window 对象上

1
2
//在 window 对象上添加 git 属性便于查看指定版本
window.git = JSON.parse(process.env.VUE_APP_GIT)

效果

效果图

总结

说到底需要这个工具的原因是因为部署的代码与最新的代码不一致,如果有了持续集成工具自动部署的话便不会存在这个问题了呢(这或许就是为什么该项目 star 这么少的原因?)