Environment Variables in VueJS

Environment variables, or .env files are generally used to store environment specific information, i.e Production, Staging, Pre-prod, dev, local etc.

They aren't usually pushed to your git repo or shared.

The most common use case i've seen is using them to store API access token for services such as Mapbox or Google Maps API etc..

If you're building a VueJS app you may choose to store your tokens in an env file and Vue CLI will automatically load your environment variables without the need to install any additional plugins.

Environments

You may create one of the following files :

.env - available in all environments

.env.development.local - available in development

.env.production.local - available in production

The name of your variables Must Start with VUE_APP_<VARIABLE_NAME>

Usage

VUE_APP_ACCESS_TOKEN="lsis8ssx82729jnajoiaj3"

export default {
    data() {
        return {
            accessToken : process.env.VUE_APP_ACCESS_TOKEN
        }
    }
}

What happens when you have the same variable in two env files?

I tested this scenario by creating the same environment variable in .env and .env.development.local.

It turns out the value that appears in .env.development.local override the other one.