关于前端:控制台查看git配置

控制台查看 git 配置

装置本地开发依赖

​ Webpack 4 及以上版本：

npm install –save-dev git-revision-webpack-plugin

​ Webpack 4 以下版本：

npm install –save-dev git-revision-webpack-plugin@2.5.1

配置文件

​ 在 vue.config.js 进行配置, 可被自动检测.

1, 在 vue.config.js 中的 module.exports 裸露 configureWebpack 对象, 配置代码如下

const webpack = require('webpack')
const GitRevisionPlugin = require('git-revision-webpack-plugin')
const gitRevisionPlugin = new GitRevisionPlugin()

module.exports = {
  configureWebpack: {
    // 利用 webpack 插件生成 VERSION 和 COMMITHASH 基于本地的生成文件过程中的 git 仓库, 在我的项目中可直观看到提交的 git    commithash
    plugins: [
    new webpack.DefinePlugin({
     // 通过一个公共的 API 裸露 VERSION，COMMITHASH 与 BRANCH
     'VERSION': JSON.stringify(gitRevisionPlugin.version()),
     'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
     'BRANCH': JSON.stringify(gitRevisionPlugin.branch()),
    })
   ]
  }
 }

2, 在 main.js 中给 window 挂载上以上配置, 具体如下

// 查看 git 命令
window.VERSION = VERSION
window.COMMITHASH = COMMITHASH
window.BRANCH = BRANCH

应用

​ 在浏览器的控制台输出以上命令, 即可呈现命令显示.

具体应用如下

VERSION
"beaa4b3"
BRANCH
"test"
COMMITHASH
"beaa4b39023fc50e58e3b96b7c6242a515adf755"