Vue can I set process.env.NODE_ENV

Question

Concerning modes and environmental variables as documented here

https://cli.vuejs.org/guide/mode-and-env.html#modes

I was rather confused why I can't set the following variable to mock for example. As the document seems to say this will be the mode that you pass in!

process.env.NODE_ENV

I have create the following server-mock command string in my package.json as follows

"serve-mock": "vue-cli-service serve --mode mock"

But when I run

npm run server-mock

The process.env.NODE_ENV is still set to development and not to mock. Am I supposed to set this in the .env.mock file? I presumed that it would be set based on the mode that was passed in as mock?

Answer 1

Vue CLI's serve command uses the mode option to load environment variables from mode-specific .env files. It also sets the NODE_ENV to one of the three standard modes (test, development, or production) only if not already set. However, if the specified mode is not standard (as is the case with mock), Vue CLI defaults to development.

So, you could set NODE_ENV=mock inside .env.mock to bypass the NODE_ENV setting mentioned above.

Alternatively, you could set NODE_ENV on the NPM script's command line in *nix shells:

{
  "scripts": {
    "serve-mock": "NODE_ENV=mock vue-cli-service serve"
  }
}

For a cross-platform solution (including Windows), you could install cross-env (as recommended in comments), and edit your NPM script as follows:

{
  "scripts": {
    "serve-mock": "cross-env NODE_ENV=mock vue-cli-service serve"
  }
}