Как добавить git-хэш в Vue.компонент js
Я хочу создать vue.компонент js, который будет отображать пакет.номер версии 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>
Я разворачиваюсь на хероку, используя команды
"postinstall": "if test \"$NODE_ENV\" = \"production\" ; then npm run build ; fi ",
"start": "node server.js",
в комплексе.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 вместо хэша?
Ответы - Как добавить git-хэш в Vue.компонент js / How to add git hash to Vue.js Component
28.06.2019 04:43:23
Я не знаком с Heroku, однако надеюсь, что некоторые части моего решения вы найдете полезными.
Я разрабатываю приложение vue, использую GitLab CI / CD, и оно развертывается в корзине S3 на AWS, а затем распространяется с cloudfront. Иногда наш клиент просит внести изменения, которые уже были внесены. Поэтому, чтобы избежать путаницы, я хотел включить хэш git в нижний колонтитул приложения, чтобы мы могли быстро проверить, что они смотрят на самую последнюю версию приложения.
В моем .gitlab-ci.ymlфайл yml I включал следующие команды 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>
28.01.2020 06:02:38
Установите ГИТ-описать как дев зависимостей (например, 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Переменная 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 напрямую, с дочерним процессом .