npm run build --mode [.env.mode] not working as expected

Question

What I've done so far:

I've been trying to setup multiple build modes like staging, testing, production and development based on NODE_ENV=production. So I'm keeping the respective files in the root of the project folder like:

• .env.production
• .env.staging
• .env.testing
• .env.development

Now, all these files are having

NODE_ENV=production VUE_APP_ENV=<mode> 

The document that I followed clearly states that,

vue-cli-service build --mode staging builds a production app in staging mode, using .env, .env.staging and .env.staging.local if they are present.

Problem:

As expected, running the command npm run build --mode staging is to give a production build with variable as listed in the .env.staging file. However, production variables are loaded instead of staging.

Ref:

• https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode
• https://forum.vuejs.org/t/how-to-build-production-app-with-varying-config/29708

Answer 1

You need to use the following command

npm run build -- --mode staging

All arguments before -- are considered npm arguments and arguments after -- are passed to vue-cli-service

Answer 2

I was having the same problem, I figured out my problem was from using a beta version (3.0.0-beta.9) of @vue/cli-service so changing it to the rc version (3.0.0-rc.3) worked. So in my package.json under devDependencies I changed it to "@vue/cli-service": "^3.0.0-rc.3"