Как использовать переменные среды во время сборки в проекте VueJS

Question

Я пытаюсь использовать переменную среды на этапе build задания CI для приложения VueJS.Я использую GitLab CI, и одна из доступных переменных среды CI_COMMIT_SHORT_SHA,

build:
  image: node:latest
  stage: build
  variables:
    CI_COMMIT_SHORT_SHA: "$CI_COMMIT_SHORT_SHA"
  artifacts:
    paths:
      - dist/
  script:
    - npm install --progress=false
    - npm run build
    - echo "Build Complete"

Вот как я пытаюсь использовать эту переменную в Vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>This is a static site that is served with a CloudFront distribution in front of an S3 bucket.</p>
    <p>The site is updated through a GitLab CI/CD pipeline.</p>
    <p>Commit ref: {{ commit }}</p>
    <p>Using cache invalidation</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      commit: process.env.CI_COMMIT_SHORT_SHA
    }
  }
}
</script>

Я не вижу, чтобы эта переменная прошла.Есть ли что-то еще, что мне нужно сделать, чтобы получить доступ к переменной окружения и отобразить ее в моем компоненте?

Answer 1

Если вы используете webpack.config, вы можете настроить DefinePlugin аналогичным образом.

В вашем webpack.config.js вы бы использовали новый плагин,

new webpack.DefinePlugin({
  /* 
    JSON.stringify(yourconfig) is highly recommened 
    to avoid overwriting existing keysother process.env
  */
  'process.env': JSON.stringify(config.prod), // or config.dev
}),

Где config.prod / config.dev - это что-то вроде

let config = {};
config.prod = require('./config/prod.env'); // imports ./config/prod.env.js
config.dev = require('./config/dev.env');

вверхуфайла

и файлы prod.env.js и dev.env.js выглядят примерно так:

'use strict';
module.exports = {
  VUE_APP_MODE: 'MYMODE'
};

Если вы хотите более точно соответствовать процессу vue, вы можете отфильтровать ключи объектаиспользуя RegExp /^VUE_APP_.*/.

Затем в разделе данных вашего файла .vue вы можете включить их, используя:

data: {
  VUE_APP_MODE: process.env.VUE_APP_MODE
}

Answer 2

Как упомянуто в https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code

Только переменные, начинающиеся с VUE_APP_, будут статически встроены в клиентский пакет с webpack.DefinePlugin.Вы можете получить к ним доступ в своем коде приложения:

console.log(process.env.VUE_APP_SECRET)