git-revision-webpack-plugin 插件安装

webpack>=5，可以直接安装最新版插件:

npm i git-revision-webpack-plugin -D

webpack 是4.x,插件安装指定版本:

npm i git-revision-webpack-plugin@3.0.6 -D

webpack 是3.x以及以下版本，插件安装指定版本:

npm i git-revision-webpack-plugin@2.5.1 -D

webpack 配置

const path = require("path");
const fs = require("fs");
const GitRevisionPlugin = require('git-revision-webpack-plugin');

const env = require("../config/prod.env");
const gitRevision = new GitRevisionPlugin();

// 添加git版本信息
env.GITVERSION = JSON.stringify(gitRevision.version());
env.GITBRANCH = JSON.stringify(gitRevision.branch());
const verisionJson = JSON.stringify({ version: env.GITVERSION, branch: env.GITBRANCH }, null, 2);

if (!fs.existsSync(config.build.assetsRoot)) {
  fs.mkdirSync(config.build.assetsRoot);
}

fs.writeFile(path.join(config.build.assetsRoot, "version.json"), verisionJson, function (err) {
  if (err) {
    console.log("版本JSON创建失败");
  } else {
    console.log("版本JSON创建成功");
  }
});

通过DefinePlugin插件暴露变量供页面环境访问：

plugins: [
    new webpack.DefinePlugin({
      "process.env": env
    }),
],

在页面中可以通过在页面中可以直接使用process.env.xxx访问。

在入口文件main.js中的vue根实例中添加这两个变量：

new Vue({
  el: "#root-app",
  data() {
    return {
      gitVerision: process.env.GITVERSION,
      gitBranch: process.env.GITBRANCH
    };
  },
  components: { App },
  template: "<App/>"
});

在APP.vue中加入HTML代码：

<div class="product-verision" style="display: none">
  <p>version: {{ $root.gitVerision }}</p>
  <p>branch：{{ $root.gitBranch }}</p>
</div>

在编译包的时候会往编译包根下生成一个version.json文件，里面就是存放的前端当前工程的git分支版本号。 当然在本地运行跟生产运行的时候也能通过HTML元素查看隐藏在界面的版本号。