Как добавить git-хеш в компонент Vue.js - PullRequest
Новая
       10

Как добавить git-хеш в компонент Vue.js

0 голосов
/ 28 декабря 2018

Я хочу создать компонент 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?

1 Ответ

0 голосов
/ 28 июня 2019

Я не знаком с Heroku, однако надеюсь, что некоторые части моего решения вы найдете полезными.

Я занимаюсь разработкой vue-приложения, использую GitLab CI / CD и он развернут наS3 Bucket на AWS затем распространяется с облачным фронтом.Иногда наш клиент будет запрашивать изменения, которые уже были сделаны.Поэтому, чтобы избежать путаницы, я хотел включить 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>
...