VUE CLI Additional Features

Environment Variables and Modes

In the previous blog post we saw how to install a project using vue-cli@3 and some essential features. In this feature will see some optional but useful features with vue cli.

Environment variables are quite essential to every project. We should put variables like api base url, access keys, secret keys, etc in this and can easily have different values for dev, production etc. Lets see how to do. 

We can specify env variables by placing the following files in your project root:

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

An env file simply contains key=value pairs of variables.

Usually these are global variable which are used throught the project

e.g in my project i have

VUE_APP_baseUrl=http://api.openweathermap.org/data/2.5/weather?q=
VUE_APP_appid=&units=metric&appid=a9ada488ff5fd28a976eed7beada1e81

Here i have used  VUE_APP  which sets the environment variable through out the app. And _baseUrl declared the variable name which can be set accordingly.

And value of VUE_APP_baseUrl can be accessed anywhere in the app for the key (i.e the url of the api).

Read this section https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code  to understand about the VUE_APP_ prefix and why its important

When i am using in the app to call the api while click on button of weather

which gives the result in console and on ui as well

#Mode

Mode is a important concept related to env variables. By default there are 3 modes in vue-cli project.

• Development is used by vue-cli-service-serve.
• Production is used by vue-cli-service-build and vue-cli-service-test:e2e.
• Test is used by vue-cli-service test:unit

Note:  that a mode is different from NODE_ENV, as a mode can contain multiple environment variables. That said, each mode does set NODE_ENV to the same value by default - for example, NODE_ENV will be set to "development" in development mode.

this means if i will create .env.development file for the specific mode this will load only on development mode.

I can overwrite the default mode by passing the -mode option flag to my package.json scripts

• vue-cli-service build builds a production app, loading .env, .env.production and .env.production.local if they are present;
• 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.

In both cases, the app is built as a production app because of the NODE_ENV, but in the staging version, process.env.VUE_APP_TITLE is overwritten with a different value.

devServer.proxy

In most cases, the frontend/backend api are running on different urls. This causes CORS issue usually when doing development on frontend. To avoid  this issue, we can configure api url via devServer.proxy option in vue.config.js.

This would be configurable via devServer.proxy option in vue.config.js.

This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://127.0.0.1:8080

Next if we want specific urls to go via devProxy, that can also be done. e.g we only have urls with path /api to be routed to our backend this can be done as below

This way we can easily provide a proxy url for our api’s and avoid the CORS issue. 

Official docs for the same  https://cli.vuejs.org/config/#devserver