我想创建一个 vue.js 组件,它将显示 package.json 版本号和最新 git 提交的哈希值。这是到目前为止的代码:
<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?
安装 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(例如 Vue 论坛):
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
})
}
}
另一种方法是直接使用 git,带有子进程。
参见
- 在 webpack 构建中包含 git 提交哈希和日期
- 获取节点中最新 git 提交的哈希
- Git 日志输出到 XML、JSON 还是 YAML?
熟悉 Heroku,但我希望我的解决方案的某些部分会让您发现有用。
我正在开发一个 vue 应用程序,我使用 GitLab CI/CD,它被部署到 AWS 上的 S3 存储桶,然后与 cloudfront 一起分发。有时我们的客户会要求已经做出的更改。因此,为了防止混淆,我想在应用程序的页脚中包含 git 哈希,以便我们可以快速检查他们是否正在查看该应用程序的最新版本。
在我的.gitlab-ci.yml
文件中,我包含了以下bash命令:
hash=`git describe --always`
echo ""$hash"" > src/assets/hash.json
这将创建一个hash.json
文件,并且该文件的唯一内容是字符串形式的最新提交哈希。 例如 "015d8f1"
我假设当您部署到 Heroku 时,有一种类似的方法来执行 bash 命令。
从那里,您可以在任何组件中读取该文件并将其用作数据。
<script>
import GitHash from "@/assets/hash.json";
export default {
name: "TheFooter",
data() {
return {
GitHash: GitHash
};
}
};
</script>