需求
在线上网页中，前端可通过某种形式查看运行的代码的最新 git commit 信息，从而快速定位版本信息
DefinePlugin插件
DefinePlugin 允许创建一个在 编译 时可以配置的全局常量。利用 vue-cli 创建项目时，已内置，无需再次安装
git-revision-webpack-plugin 插件
git-revision-webpack-plugin 是一个基于 webpack 的插件，主要作用是获取当前 git 版本号与分支信息。使用前使用 npm 安装依赖： npm i git-revision-webpack-plugin -D
在 vue.config.js 做如下配置
/* vue.config.js 配置文件*/
// 引入插件，并生成实例
const { GitRevisionPlugin } = require('git-revision-webpack-plugin')
const gitRevisionPlugin = new GitRevisionPlugin()
// 使用 dayjs 格式化时间，使用前需安装依赖 npm i dayjs -S
const dayjs = require('dayjs')
module.exports = {
chainWebpack: config => {
config.plugin('define').tap(args => {
args[0]['process.env'].COMMIT_HASH = JSON.stringify(gitRevisionPlugin.commithash())
args[0]['process.env'].BRANCH = JSON.stringify(gitRevisionPlugin.branch())
args[0]['process.env'].LAST_COMMIT_DATETIME = JSON.stringify(dayjs(gitRevisionPlugin.lastcommitdatetime()).format('YYYY-MM-DD HH:mm:ss'))
return args
})
}
}
将配置的全局场景挂载到 window 上
个人用法是挂载到
window上，可根据实际需求做处理
/* main.js 文件 */
window['_git'] = Object.freeze({
COMMIT_HASH: process.env.COMMIT_HASH,
BRANCH: process.env.BRANCH,
LAST_COMMIT_DATETIME: process.env.LAST_COMMIT_DATETIME
})
查看
项目运行时，即可在开发者工具中获取运行代码的 git 信息：
