How to set VUE_APP_VARIABLE during CI process Azure DevOps

Question

I'm using VueJS 2.x

In my code, I want to use an environment variable like this:

callApi(process.env.VUE_APP_API_KEY)

The problem is: I want to set the value of this VUE_APP_API_KEY during the CI process in Azure DevOps but my solution doesn't work.

What I have done:

1. Create a variable name API_KEY in pipeline variables.

2. Try to set the value during this task

- task: CmdLine@2
  displayName: Build application
  inputs:
    script: yarn build
  env:
    VUE_APP_API_KEY: $(API_KEY)

Does anyone know what wrong with my solution and how to do it the right way?

Thank you

Answer 1

Assuming you are building your application using Webpack, you have to inject your env vars manually:

Passing environment-dependent variables in webpack

Answer 2

I have tested your YAML script to set the value of the variable and it could output the value I have set.

  - task: CmdLine@2
    displayName: Build application
    inputs:
      script: echo $VUE_APP_API_KEY
    env:
      VUE_APP_API_KEY: $(API_KEY)

You could refer to this document for more information about set variable with command link task.