Everything you need to know about Environment Variables in Vue.js
Tags: vue, javascript, environment, env
Published: 2020-04-01 22:20:38

In this post, we’ll learn how to work with distinct configurations between the development and production mode.

In a Vue project, we have to access the backend server through a URL. This URL can be `http://localhost:8080/api`, while we’re developing the project and `http://site.com/api` when the project is published. It’s necessary to find a way to change this URL automatically, according to the current state of the project.


A solution to this problem is the `.env` files concept.


## .env files


The files with extension "env" (environment) are responsible for storing information that is sensitive to the environment (development, testing and production). 


## Using .env files in Vue


To use `.env` files in Vue, we can create an application that already supports environment files. Let’s install the **vue-cli** and create a simple project. 


With Node 8 or higher installed, run: 


```
$ vue create hello-world-env
```

To use `vue create` command, you need to install the `vue-cli` tool, through the command:

```
$ npm install -g @vue/cli
```

The `vue create` command will create an application with several files ready for use, like the above image:

![](https://i.imgur.com/MDyICPw.png)


In this post, we’re focused only on the environment configuration. The first thing to do it is to create a `.env` file at the project folder, with the following content:


```
VUE_APP_MODE=development
```

This file contains a pair of key/value entries, and you must start your key with "VUE_APP_". Only keys starting with "VUE_APP_" will be available in the Vue application. The `VUE_APP_MODE` key can be used in the Vue application through `proccess.env.VUE_APP_MODE` entry, like the code above:

```js
export default {
  name: 'App',
  mounted() {
    console.log(`Working on '${process.env.VUE_APP_MODE}' mode`)
  },
}
</script>
```

This code produces the following response (in the ChromeDev Tools console): 

![](https://i.imgur.com/t9idTwe.png)


Now let's simulate the production mode. First, create the `.env.production` file, with the following code:


```
VUE_APP_MODE=production
```

Build the vue project with `npm run build`:


![](https://i.imgur.com/mThrCpT.png)


After building, the `dist` directory was created. To run this project, use the following command:

```
$ npx http-server dist
```

The `npx` command will run the `http-server` package, with the parameter "dist". The result is below:

![](https://i.imgur.com/Uc7ts6D.png)

When opening the url in the browser, the result will be the following:

![](https://i.imgur.com/1Rk57qF.png)

Now we see "Working on production mode" message. The `.env.production` file was used instead `.env`. This way, we can have different values for each build (development and production).

# Tips

1- It's possible to get the project version stored in `package.json` file. First, open or create the Vue configuration file called `vue.config.js` (at the root of the project) and add this code:

```js
process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
    // config
  }
```

2- To show environment values inside `<template>` tag, you must use computed vars. The following example will fail:

```vue
<template>
  <div> {{ process.env.VUE_APP_VERSION }} <div>
</template>
```

Use *computed vars* to display the value of "VUE_APP_VERSION" correctly:

```vue
<template>
  <div>App Version: {{version}}</div>
</template>

<script>
export default {
  computed: {
    version () {
      return process.env.VUE_APP_VERSION
    }
  },
}
</script>
```

3- If you change something in the .env file, remember that you need to restart the server for the changes to take effect. 

4- You can find the github project project [here](https://github.com/danielschmitz/hello-world-env)