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
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 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_ENVto the same value by default - for example,
NODE_ENVwill 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 stagingbuilds a production app in staging mode, using
.env.staging.localif 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.
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
This would be configurable via
devServer.proxy option in
This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to
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