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

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

28.12.2018 09:05:53 Просмотров 26 Источник

Я хочу создать 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 вместо хэша?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/53962583/how-to-add-git-hash-to-vue-js-component#comment94767722_53962583
Я не думаю, что это дубликат. Это полезно, но это должно быть запущено на узловом сервере. Как передать результат компоненту vue?

Ответы - Как добавить git-хэш в Vue.компонент js / How to add git hash to Vue.js Component

Eric

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>
Piotr Migdal

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 напрямую, с дочерним процессом .

Смотреть также

Закрыть X