仅针对vue项目，当然你如果能看懂也可以继续。
前言
前一阵子因为vue部署不上去错误没有解决，一直找不到原因，后来一看部署的git版本有问题，于是决定在页面中显示git版本。
要显示git版本，首先要知道它存在什么地方？这就导致我们需要知道git的目录中的信息，知道了信息我们怎么把它拿出来这也是个问题？。
准备工作
.git目录与git了解
当你创建一个仓库的时候，使用 git init 指令， git 将会创建一个神奇的目录：.git。这个目录下包含了所有 git 正常工作所需要的信息。
这里就是第一次提交之前 .git 目录的文件结构：
├── HEAD:这个文件包含了一个档期分支（branch）的引用，通过这个文件Git可以得到下一次commit的parent
├── branches
├── config:这个是GIt仓库的配置文件
├── description:仓库的描述信息，主要给gitweb等git托管系统使用
├── hooks:这个目录存放一些shell脚本，可以设置特定的git命令后触发相应的脚本；在搭建gitweb系统或其他git托管系统会经常用到hook script
│ ├── pre-commit.sample
│ ├── pre-push.sample
│ └── ...
├── info:包含仓库的一些信息
│ └── exclude
├── objects:所有的Git对象都会存放在这个目录中，对象的SHA1哈希值的前两位是文件夹名称，后38位作为对象文件名
│ ├── info
│ └── pack
└── refs:这个目录一般包括三个子文件夹，heads、remotes和tags，heads中的文件标识了项目中的各个分支指向的当前commit
├── heads
└── tags
这个文件包含你仓库的设置信息。例如这里会放你远程仓库的 URL，你的 email 地址，你的用户名等…。 每次你在控制台使用“git config…”指令时，修改的就是这里。
这里不对.git的文件进行详细说明了，直接说明是那个文件，这里给大家推荐几个.git目录详解的教程：
git指南:GitBook
探索 .git 目录，让你真正了理解git
Git HEAD 意思详解 和版本回退
GitBook, Git + Markdown 快速发布你的书籍
首先，Git必须知道当前版本是哪个版本，在Git中，用HEAD表示当前分支版本的路径指向，也就是最新的提交。这里我们需要用到git根目录下的HEAD，我们打开它，他里面有这样一句话：
ref: refs/heads/这里是你的分支名字
如果你只有master分支或者你通过git checkout 分支切换到master上，就是ref: refs/heads/master。
比如题主目前有两个分支
在develop分支时，HEAD的内容是ref: refs/heads/develop，在master分支时HEAD的内容是ref: refs/heads/master
我们根据HEAD指向的目录信息可以看到如下内容
这里说明题主是develop分支(如果你们没有develop分支，请打开你们自己的当前分支版本的路径指向)，所以我们打开develop，它的内容就是当前git版本b1b8d7b1f29d40b68c16b2f524d8655ae99faeae(注意我的提交ID和你的肯定不一样）
node读取文件
因为我们是基于webpack的git版本获取，而webpack是基于node的，因为是基于vue的前端，我们没有办法在src底下的前端项目中获取src文件之外的东西（如果你这样做了，不过不是static，那是不对的），所以我们只能在src之外的可以使用node的地方，供我们选择的地方不多，只有下面这些：
我们这里仔细敲定选通过config的底下的项目构建文件dev.env.js和prod.env.js来得到我们需要的信息，即在项目构建时我们获取git版本。
我们需要使用node的fs模块
这里附上node的api：
webpack构建时使用node获取git版本
默认的dev.env.js是这样的:
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
默认的prod.env.js是这样的:
module.exports = {
NODE_ENV: '"production"'
}
我们dev.env.js的获取代码如下:（记住题主是develop分支，你们不一定，但是代码是相同的，只是注释换成你们自己的）
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
// 当前脚本的工作目录的路径
var cwd = '"' + process.cwd() + '"' // process-node全局模块用来与当前进程互动，可以通过全局变量process访问，不必使用require命令加载。它是一个EventEmitter对象的实例。process.cwd()表示返回运行当前脚本的工作目录的路径
// 获取git版本
var fs = require("fs")
var gitHEAD = fs.readFileSync('.git/HEAD', 'utf-8').trim() // ref: refs/heads/develop
var ref = gitHEAD.split(': ')[1] // refs/heads/develop
var develop = gitHEAD.split('/')[2] // 环境：develop
var gitVersion = fs.readFileSync('.git/' + ref, 'utf-8').trim() // git版本号，例如：6ceb0ab5059d01fd444cf4e78467cc2dd1184a66
var gitCommitVersion = '"' + develop + ': ' + gitVersion + '"' // 例如dev环境: "develop: 6ceb0ab5059d01fd444cf4e78467cc2dd1184a66"
module.exports = merge(prodEnv, {
CURRENT_WORK_DIR: cwd, // 当前脚本的工作目录的路径
GIT_COMMIT_VERSION: gitCommitVersion, // 获取git版本
NODE_ENV: '"development"'
}
注意：上面代码的'"'东西不能换成'，具体原因自行百度。
可是我们dev.env.js只是开发环境，我们需要在正式环境上也显示，很简单，复制一份放到prod.env.js中:
// 当前脚本的工作目录的路径
var cwd = '"' + process.cwd() + '"' // process-node全局模块用来与当前进程互动，可以通过全局变量process访问，不必使用require命令加载。它是一个EventEmitter对象的实例。process.cwd()表示返回运行当前脚本的工作目录的路径
// 获取git版本
var fs = require("fs")
var gitHEAD = fs.readFileSync('.git/HEAD', 'utf-8').trim() // ref: refs/heads/develop
var ref = gitHEAD.split(': ')[1] // refs/heads/develop
var develop = gitHEAD.split('/')[2] // 环境：develop
var gitVersion = fs.readFileSync('.git/' + ref, 'utf-8').trim() // git版本号，例如：6ceb0ab5059d01fd444cf4e78467cc2dd1184a66
var gitCommitVersion = '"' + develop + ': ' + gitVersion + '"' // 例如dev环境: "develop: 6ceb0ab5059d01fd444cf4e78467cc2dd1184a66"
module.exports = merge(prodEnv, {
CURRENT_WORK_DIR: cwd, // 当前脚本的工作目录的路径
GIT_COMMIT_VERSION: gitCommitVersion, // 获取git版本
NODE_ENV: '"production"'
}
然后我们就可以在别的地方，拿到这些值：例如main.js中
console.log(process.env.CURRENT_WORK_DIR)
console.log(process.env.GIT_COMMIT_VERSION)
结语
到此我们可以得到git版本还有当前脚本的工作目录的路径。
提示：后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。
