在vue项目中展现package以及git提交信息

vue项目如何这样在控制台显示版本信息呢？

chrome控制台打印信息：

版本号
版本信息项目，运行在 dev 环境，编译时间：2020-06-28T11:40:52+08:00
发布版本：1.0.2；最后提交：efewwererwfsdcsdcsdcccxvcvxe2323d，超前发布版本9个提交
运行在：Chrome 83.0.4103.106 on OS X 10.15.4 64-bit

控制台打印出了项目名称、项目运行环境、版本号以及 git 提交信息。当我们在调试时，如果出现bug也会方便我们找到出现问题的版本。那怎样去实现这个功能，无非就是去取我们需要的信息，然后在main.tx中console.log出来。下面开始干正事。

首先，介绍一下webpack的DefinePlugin插件，DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。

每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。

• 如果这个值是一个字符串，它会被当作一个代码片段来使用。
• 如果这个值不是字符串，它会被转化为字符串(包括函数)。
• 如果这个值是一个对象，它所有的 key 会被同样的方式定义。
• 如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。

这里，在webpack.conf.js里定义DefinePlugin 的键值：

onst path = require('path');
const {
    DefinePlugin } = require('webpack');
const repoInfo = require('./git-repo-info'