Update vue-cli mode documentation to show a mode other than production or development

[richard-edwards]

What problem does this feature solve?

Increases comprehension on what the --mode feature can be used for and how it might be used, specifically that you can override the NODE_ENV variable to produce a production build with alternate config (ie. staging)

Refer to https://forum.vuejs.org/t/how-to-build-production-app-with-varying-config/29708/3

What does the proposed API look like?

.env
VUE_APP_TITLE=My App

.env.staging
NODE_ENV=production
VUE_APP_TITLE=My App (staging)

vue-cli-service build

• builds a production app using .env then .env.production (or .env.production.local)

vue-cli-service build --mode staging

• builds a production app using .env then .env.staging (or .env.staging.local)

In both cases, the app is built as a production app because of the NODE_ENV, but in the staging equivalent the process.env.VUE_APP_TITLE variable is overrided

[jnarowski]

When I use the --mode staging it does not build the full file with vendor.js and css, it seems to only build the .js file? Is this a bug?

[jnarowski]

When --mode staging

  File           Size                          Gzipped

  dist/app.js    17979.27 kb                   3376.70 kb

When --mode production

  File                          Size                   Gzipped

  dist/js/vendor.1763b1d6.js    1653.10 kb             474.21 kb
  dist/js/app.8362820d.js       262.38 kb              73.42 kb
  dist/css/app.09f4f58d.css     387.05 kb              61.45 kb

[richard-edwards]

@jnarowski See the start of this thread, just add a '.env.staging' file and add the NODE_ENV=production as the first line and then do vue-cli-service build --mode staging

[jnarowski]

Perfect, I guess I totally missed that. It worked! Thanks so much.

[jnarowski]

I wonder if the docs should be updated to clarify that now? I do see that it specifies this (adding NODE_ENV) in the .env.[environment] files but I totally missed it.

[yyx990803]

This has been added to the docs, thank you!

[chriszrc]

Hmm, I'm wondering if the example of setting the BASE_URL on this page should also be updated:

https://cli.vuejs.org/config/#baseurl

Because if the only way to trigger a slimmed down "production" build is by setting the NODE_ENV=production, it makes relying on the NODE_ENV to inform the app about which environment you're in useless.

Instead, it seems like the example here should instead rely on using the modes, and setting the different base_urls in an environment variable in the corresponding .env.[mode] file and using that variable to set the baseUrl: value:

baseUrl: process.env.BASE_URL_PREFIX,