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

Created on 14 Mar 2018 · 7Comments · Source: vuejs/vue-cli

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)



md5-769ca98e19c45180d5ba8c4afcb7fa39



vue-cli-service build



md5-2c7ab8002b7b949914436f170a75f816



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

documentation enhancement

Source

richard-edwards

👍8

Most helpful comment

@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

richard-edwards on 24 Mar 2018

👍8 🎉7

All 7 comments

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 on 24 Mar 2018

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

jnarowski on 24 Mar 2018

@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

richard-edwards on 24 Mar 2018

👍8 🎉7

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

jnarowski on 24 Mar 2018

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.

jnarowski on 25 Mar 2018

This has been added to the docs, thank you!

yyx990803 on 8 Jun 2018

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: