目标

在Vue项目打包后的 dist/index.html 文件中写入本地打包的git信息。方便测试确定线上当前的版本信息。

实施步骤

提取git相关信息

在构建时需要获取git相关的信息，这些信息都需要使用git命令来获取。在node中，要执行一段命令行脚本需要使用child_process模块。

在项目build目录下新建 gitInfo.js 文件，文件内容如下：

const child_process = require('child_process')

const formatDate = function(date) {
    function pad(value) {
        return (value < 10 ? '0':'') + value
    }

    let year = date.getFullYear();
    let month = pad(date.getMonth() + 1);
    let day = pad(date.getDate());
    let hour = pad(date.getHours());
    let minutes = pad(date.getMinutes());
    let seconds = pad(date.getSeconds());

    return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds
}

// git 最后一次提交的 Head
const commit = child_process.execSync('git show -s --format=%H').toString().trim()
const commitUserName = child_process.execSync('git show -s --format=%cn').toString().trim()
const commitUserMail = child_process.execSync('git show -s --format=%ce').toString().trim()
const commitDate = formatDate(new Date(child_process.execSync(`git show -s --format=%cd`).toString()))
const buildDate = formatDate(new Date())
const branch = child_process.execSync('git rev-parse --abbrev-ref HEAD').toString().replace(/\s+/, '')

module.exports = {commit, commitUserName, commitUserMail, commitDate, buildDate, branch}

配置 vue.config.js

在 vue.config.js 文件中引入 gitInfo.js 文件。

const gitInfo = require('./gitInfo.js')

chainWebpack: (config) => {
    // ...
    config.plugin('html').tap(args => {
        args[0].gitInfo = gitInfo
        return args
    })
},

index.html添加信息

接着在 index.html 文件中添加版本信息

<meta name="author"      content="<%= htmlWebpackPlugin.options.gitInfo.commitUserName %>">
<meta name="createdAt"   content="<%= htmlWebpackPlugin.options.gitInfo.commitDate %>">
<meta name="generatedAt" content="<%= htmlWebpackPlugin.options.gitInfo.buildDate %>">
<meta name="version"     content="<%= htmlWebpackPlugin.options.gitInfo.commit %>">
<meta name="branch"      content="<%= htmlWebpackPlugin.options.gitInfo.branch %>">