如何在 VueJS 项目中在构建时使用环境变量

Question

I'm trying to use an environment variable during the build stage of a CI job for a VueJS app. I'm using GitLab CI, and one of the environment variables that is made available is 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"

Here's how I'm trying to use this variable in 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>

I'm not seeing this variable come through. Is there something else I need to do in order to access the environment variable and display it in my component?

Answer 1

If you're using webpack.config , you can set up DefinePlugin in a similar way.

In your webpack.config.js you would use a new plugin,

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
}),

Where config.prod / config.dev is something like

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

at the top of the file,

and the prod.env.js and dev.env.js files look something like

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

If you wanted to match the vue process more closely,you could filter out the object keys using RegExp /^VUE_APP_.*/ .

Then in the data section of your .vue file you can include these by using:

data: {
  VUE_APP_MODE: process.env.VUE_APP_MODE
}

Answer 2

As mentioned in https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code

Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin . You can access them in your application code:

console.log(process.env.VUE_APP_SECRET)

Answer 3

After some research it seemed that the vue-cli-service build command only looks into the dot-files in the root of your project, and only processes these variables starting with VUE_APP_ (in various .env files)

You could set all the variables in the Gitlab CI options and then copy those variables to the .env file. Now, when vue-cli builds the project, it injects these values in the transpiled scripts.

You could issue a command like this before you build the project:

env | grep 'VUE_APP_' > .env

I also use a staging environment that is built when pushing into the staging branch. Therefore I have these variables set into Gitlab:

• VUE_APP_VAR1=foo
• VUE_APP_VAR2=bar
• VUE_ACCEPT_VAR1=foo
• VUE_ACCEPT_VAR2=bar

Since vue-cli wants the variables to start with VUE_APP_ I do a replace with sed:

env | grep 'VUE_ACCEPT_' | sed 's/VUE_ACCEPT_/VUE_APP_/' > .env