前端显示服务器控制台信息,关于前端:控制台查看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"