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: {{ mit }}</p>
    <p>Using cache invalidation</p>
  </div>
</template>

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

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

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: {{ mit }}</p>
    <p>Using cache invalidation</p>
  </div>
</template>

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

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

• javascript
• vue.js
• npm
• gitlab-ci

• Are you using webpack to pile your SFC? – Cody Geisler Commented Feb 20, 2019 at 18:28
• @CodyG. I should add that this is a Vue CLI 3 generated project. So yes it is using webpack under the hood – briancaffey Commented Feb 20, 2019 at 18:29
• Well, process.env.CI_COMMIT_SHORT_SHA is probably in your exported code, which when run in the browser obviously it doesn't have that ... I'm not sure how to include it off the top of my head but I'm looking into it – Cody Geisler Commented Feb 20, 2019 at 18:32
• right, so I'm trying to figure out how to use this kind of environment variable during build time – briancaffey Commented Feb 20, 2019 at 18:33
• 1 What I would do... personally... is have your build process spit out a server_props.js file that you just import into your vue template... so server_props.js : module.exports = { vue_server_props: { mit: blahblah } } and then in your vue template import {vue_server_props} from './config.js; and then put that into your data() – Cody Geisler Commented Feb 20, 2019 at 18:34

3 Answers 3

As mentioned in https://cli.vuejs/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)

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 remened 
    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
}

After some research it seemed that the vue-cli-service build mand 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 mand 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