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:

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:

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):

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:

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:

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

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:

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:

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

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

<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