node.js - 如何将git hash添加到Vue.js组件

Question

我想创建一个vue.js组件，该组件将显示package.json版本号和最新git commit的哈希值。这是到目前为止的代码:

<template>
  <div class="versionLabel">Version: {{version}} (HASH)</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { version } from '../../package.json';

@Component
export default class VersionLabel extends Vue {
  get version() {
    return version;
  }
}
</script>

<style scoped lang="scss">
div {
  background-color: rgb(60, 172, 60);
  color: lightgray;
}
</style>

我正在使用命令部署到Heroku

"postinstall": "if test \"$NODE_ENV\" = \"production\" ; then npm run build ; fi ",
"start": "node server.js",

在package.json和这个简单的服务器中:

const express = require('express');
const serveStatic = require("serve-static")

app = express();
app.use(serveStatic(__dirname + '/dist'));

const port = process.env.PORT || 5000;
app.listen(port);

版本号有效(尽管欢迎提出改进建议)，但如何添加git hash代替HASH？

Answer 1

将git-describe安装为开发依赖项(例如yarn add --dev git-describe)。

在vue.config.js中添加:

const {gitDescribe, gitDescribeSync} = require('git-describe');
process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash

现在，在每个组件中，我们都有 process.env.VUE_APP_GIT_HASH变量。

这是我将其添加到我的应用程序中的方式: https://github.com/Quantum-Game/quantum-game-2/pull/164(进行了一些讨论)。

其他方法

还有其他方法，例如使用 git-revision-webpack-plugin( the Vue forum的示例):

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

module.exports = {
  'chainWebpack': config => {
    config.plugin('define').tap(args => {
      const gitRevisionPlugin = new GitRevisionPlugin()
      args[0]['process.env']['VUE_APP_COMMIT_HASH'] = JSON.stringify(gitRevisionPlugin.commithash())
      return args
    })
  }
}

另一种方法是直接使用gitt_a和gitt_a。

也可以看看

child-process

Including git commit hash and date in webpack build

Get hash of most recent git commit in Node