僅針對(duì)vue項(xiàng)目，當(dāng)然你如果能看懂也可以繼續(xù)叁温。
前言
前一陣子因?yàn)関ue部署不上去錯(cuò)誤沒(méi)有解決再悼，一直找不到原因，后來(lái)一看部署的git版本有問(wèn)題膝但，于是決定在頁(yè)面中顯示git版本冲九。
要顯示git版本，首先要知道它存在什么地方跟束？這就導(dǎo)致我們需要知道git的目錄中的信息莺奸，知道了信息我們?cè)趺窗阉贸鰜?lái)這也是個(gè)問(wèn)題？冀宴。
準(zhǔn)備工作
.git目錄與git了解
當(dāng)你創(chuàng)建一個(gè)倉(cāng)庫(kù)的時(shí)候灭贷，使用 git init 指令， git 將會(huì)創(chuàng)建一個(gè)神奇的目錄：.git略贮。這個(gè)目錄下包含了所有 git 正常工作所需要的信息甚疟。
這里就是第一次提交之前 .git 目錄的文件結(jié)構(gòu)：
├── HEAD:這個(gè)文件包含了一個(gè)檔期分支（branch）的引用，通過(guò)這個(gè)文件Git可以得到下一次commit的parent
├── branches
├── config:這個(gè)是GIt倉(cāng)庫(kù)的配置文件
├── description:倉(cāng)庫(kù)的描述信息逃延，主要給gitweb等git托管系統(tǒng)使用
├── hooks:這個(gè)目錄存放一些shell腳本览妖，可以設(shè)置特定的git命令后觸發(fā)相應(yīng)的腳本；在搭建gitweb系統(tǒng)或其他git托管系統(tǒng)會(huì)經(jīng)常用到hook script
│ ├── pre-commit.sample
│ ├── pre-push.sample
│ └── ...
├── info:包含倉(cāng)庫(kù)的一些信息
│ └── exclude
├── objects:所有的Git對(duì)象都會(huì)存放在這個(gè)目錄中揽祥，對(duì)象的SHA1哈希值的前兩位是文件夾名稱(chēng)讽膏，后38位作為對(duì)象文件名
│ ├── info
│ └── pack
└── refs:這個(gè)目錄一般包括三個(gè)子文件夾，heads拄丰、remotes和tags府树，heads中的文件標(biāo)識(shí)了項(xiàng)目中的各個(gè)分支指向的當(dāng)前commit
├── heads
└── tags
這個(gè)文件包含你倉(cāng)庫(kù)的設(shè)置信息。例如這里會(huì)放你遠(yuǎn)程倉(cāng)庫(kù)的 URL料按，你的 email 地址奄侠，你的用戶名等…。 每次你在控制臺(tái)使用“git config…”指令時(shí)站绪，修改的就是這里遭铺。
這里不對(duì).git的文件進(jìn)行詳細(xì)說(shuō)明了，直接說(shuō)明是那個(gè)文件恢准，這里給大家推薦幾個(gè).git目錄詳解的教程：
git指南:GitBook
探索 .git 目錄魂挂，讓你真正了理解git
Git HEAD 意思詳解 和版本回退
GitBook, Git + Markdown 快速發(fā)布你的書(shū)籍
首先，Git必須知道當(dāng)前版本是哪個(gè)版本馁筐，在Git中涂召，用HEAD表示當(dāng)前分支版本的路徑指向，也就是最新的提交敏沉。這里我們需要用到git根目錄下的HEAD果正，我們打開(kāi)它炎码，他里面有這樣一句話：
ref: refs/heads/這里是你的分支名字
如果你只有master分支或者你通過(guò)git checkout 分支切換到master上，就是ref: refs/heads/master秋泳。
比如題主目前有兩個(gè)分支
在develop分支時(shí)潦闲，HEAD的內(nèi)容是ref: refs/heads/develop，在master分支時(shí)HEAD的內(nèi)容是ref: refs/heads/master
我們根據(jù)HEAD指向的目錄信息可以看到如下內(nèi)容
這里說(shuō)明題主是develop分支(如果你們沒(méi)有develop分支迫皱，請(qǐng)打開(kāi)你們自己的當(dāng)前分支版本的路徑指向)歉闰，所以我們打開(kāi)develop，它的內(nèi)容就是當(dāng)前git版本b1b8d7b1f29d40b68c16b2f524d8655ae99faeae(注意我的提交ID和你的肯定不一樣）
node讀取文件
因?yàn)槲覀兪腔趙ebpack的git版本獲取卓起，而webpack是基于node的和敬，因?yàn)槭腔趘ue的前端，我們沒(méi)有辦法在src底下的前端項(xiàng)目中獲取src文件之外的東西（如果你這樣做了戏阅，不過(guò)不是static昼弟，那是不對(duì)的），所以我們只能在src之外的可以使用node的地方奕筐，供我們選擇的地方不多舱痘，只有下面這些：
我們這里仔細(xì)敲定選通過(guò)config的底下的項(xiàng)目構(gòu)建文件dev.env.js和prod.env.js來(lái)得到我們需要的信息，即在項(xiàng)目構(gòu)建時(shí)我們獲取git版本救欧。
我們需要使用node的fs模塊
這里附上node的api：
webpack構(gòu)建時(shí)使用node獲取git版本
默認(rèn)的dev.env.js是這樣的:
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
默認(rèn)的prod.env.js是這樣的:
module.exports = {
NODE_ENV: '"production"'
}
我們dev.env.js的獲取代碼如下:（記住題主是develop分支衰粹，你們不一定锣光，但是代碼是相同的笆怠，只是注釋換成你們自己的）
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
// 當(dāng)前腳本的工作目錄的路徑
var cwd = '"' + process.cwd() + '"' // process-node全局模塊用來(lái)與當(dāng)前進(jìn)程互動(dòng)，可以通過(guò)全局變量process訪問(wèn)誊爹，不必使用require命令加載蹬刷。它是一個(gè)EventEmitter對(duì)象的實(shí)例。process.cwd()表示返回運(yùn)行當(dāng)前腳本的工作目錄的路徑
// 獲取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] // 環(huán)境：develop
var gitVersion = fs.readFileSync('.git/' + ref, 'utf-8').trim() // git版本號(hào)频丘，例如：6ceb0ab5059d01fd444cf4e78467cc2dd1184a66
var gitCommitVersion = '"' + develop + ': ' + gitVersion + '"' // 例如dev環(huán)境: "develop: 6ceb0ab5059d01fd444cf4e78467cc2dd1184a66"
module.exports = merge(prodEnv, {
CURRENT_WORK_DIR: cwd, // 當(dāng)前腳本的工作目錄的路徑
GIT_COMMIT_VERSION: gitCommitVersion, // 獲取git版本
NODE_ENV: '"development"'
}
注意：上面代碼的'"'東西不能換成'办成，具體原因自行百度。
可是我們dev.env.js只是開(kāi)發(fā)環(huán)境搂漠，我們需要在正式環(huán)境上也顯示迂卢，很簡(jiǎn)單，復(fù)制一份放到prod.env.js中:
// 當(dāng)前腳本的工作目錄的路徑
var cwd = '"' + process.cwd() + '"' // process-node全局模塊用來(lái)與當(dāng)前進(jìn)程互動(dòng)桐汤，可以通過(guò)全局變量process訪問(wèn)而克，不必使用require命令加載。它是一個(gè)EventEmitter對(duì)象的實(shí)例怔毛。process.cwd()表示返回運(yùn)行當(dāng)前腳本的工作目錄的路徑
// 獲取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] // 環(huán)境：develop
var gitVersion = fs.readFileSync('.git/' + ref, 'utf-8').trim() // git版本號(hào)员萍，例如：6ceb0ab5059d01fd444cf4e78467cc2dd1184a66
var gitCommitVersion = '"' + develop + ': ' + gitVersion + '"' // 例如dev環(huán)境: "develop: 6ceb0ab5059d01fd444cf4e78467cc2dd1184a66"
module.exports = merge(prodEnv, {
CURRENT_WORK_DIR: cwd, // 當(dāng)前腳本的工作目錄的路徑
GIT_COMMIT_VERSION: gitCommitVersion, // 獲取git版本
NODE_ENV: '"production"'
}
然后我們就可以在別的地方，拿到這些值：例如main.js中
console.log(process.env.CURRENT_WORK_DIR)
console.log(process.env.GIT_COMMIT_VERSION)
結(jié)語(yǔ)
到此我們可以得到git版本還有當(dāng)前腳本的工作目錄的路徑拣度。
提示：后面還有精彩敬請(qǐng)期待碎绎，請(qǐng)大家關(guān)注我的專(zhuān)題：web前端螃壤。如有意見(jiàn)可以進(jìn)行評(píng)論，每一條評(píng)論我都會(huì)認(rèn)真對(duì)待筋帖。
