How to make vue-cli-service fail if one of the process.env.VUE_APP_* environment vars cannot be resolved

Question

I am using environment variables in my code as explained in the vue-cli-service environment variables section, and it surely works when the environment variables are defined.

But when one of the environment variables is undefined, it just replaces it with undefined.

Let's say if I introduce a new process.env.VUE_APP_MY_NEW_VAR, but then I don't set it in the environment, it will just put an undefined there.

I wanted to be sure that when building the project (npx vue-cli-service build [...]), none of the environment variables remain undefined.

One of my ideas is to check for undefined always, but it would happen at run time, not compile time.

Another idea is to create a shell script to check that all the variables are set before building, but that sounds quite manual.

Is there a way to do configure it and make it part of the build?

Answer 1

You can add a check in vue.config.js. For example

const REQUIRED_ENV_VARS = [
  'VUE_APP_VAR_1',
  'VUE_APP_VAR_2'
]

if (REQUIRED_ENV_VARS.some(env => typeof process.env[env] === 'undefined')) {
  throw new Error('Required environment variables are missing')
}