How To Use Environment Variables in Vue.js

Introduction

In a web app, you will most likely have to access a backend API server through a URL. In a development environment - when you are working locally, this URL can be something like: http://localhost:8080/api. In a production environment - when the project has been deployed, this URL can be something like: https://example.com/api. Environment variables allow you to change this URL automatically, according to the current state of the project.

With Vue.js, it is possible to use environment variables through files with the .env file extension. These files are responsible for storing information that is specific to the environment (“development”, “testing”, “production”, etc.).

In this article, you will learn how to work with distinct configurations between development and production mode for Vue.js projects using Vue CLI 3+ and 2.

Prerequisites

To follow along with this article, you will need:

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
• Some familiarity with setting up a Vue.js project.

This tutorial was verified with Node v15.1.0, npm v6.14.8, Vue.js v2.6.12, TypeScript v3.9.3, @vue/cli v4.5.8, and vue-cli v2.9.6.

Step 1 — Using .env Files with Vue CLI 3+

Vue CLI 4 is the current version of @vue/cli. Once you create a Vue.js project, you can add .env and .env.production files.

With your terminal, create a new Vue.js project with @vue/cli:

npx @vue/cli create vue-cli-env-example

Navigate to the project directory;

cd vue-cli-env-example

With a code editor, create a .env file and add values like the following:

VUE_APP_ROOT_API=http://localhost/api

Then, with a code editor, create a .env.production file and add values like the following:

VUE_APP_ROOT_API=http://www.example.com/api

After creating the VUE_APP_ROOT_API variable, you can use it anywhere in Vue through the global process.env object:

process.env.VUE_APP_ROOT_API

For example, open the HelloWorld.vue file and in the <script> tag add the following:

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted() {
    console.log(process.env.VUE_APP_ROOT_API)
  },
}
</script>

If you compile the application with development values:

npm run serve

This command will use the .env value and the console log will display: http://localhost/api.

If you compile the application with production values:

npm run serve -- --mode=production

vue-cli-service serve --mode=production

This command will use the .env.production value and the console log will display: http://www.example.com/api.

By default, Vue CLI will support three modes: “development”, "test’, and “production”. For more information on using environment variables with Vue CLI 3, consult the official documentation.

Step 2 — Using .env Files with Vue CLI 2

Vue CLI 2 is the previous version of vue-cli. Once you create a Vue.js project, you can use dev.env.js, test.env.js, and prod.env.js.

With your terminal, create a new Vue.js project with vue-cli:

npx vue-cli init webpack vue-cli-two-env-example

There are two files in the config directory: dev.env.js and prod.env.js.

These files are used in development and production mode. When you are running the application through the npm run dev command, the dev.env.js file is used. When you compile the project for production with the npm run build command, the prod.env.js file is used instead.

Open dev.env.js in a code editor and add the ROOT_API value:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ROOT_API: '"http://localhost/api"'
})

Next, open prod.env.js in a code editor and add the ROOT_API value:

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ROOT_API: '"http://www.example.com/api"'
}

After creating the ROOT_API variable, you can use it anywhere in Vue through the global process.env object:

process.env.ROOT_API

For example, open the HelloWorld.vue file and in the <script> tag add the following:

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    console.log(process.env.ROOT_API)
  },
}
</script>

If you compile the application with:

npm run dev

This command will use the dev.env.js value and the console log will display: http://localhost/api.

If you compile the application with:

npm run build

This command will use the prod.env.js value and generate the application in the dist directory. Navigate into this directory and verify that the process.env.ROOT_API value uses http://www.example.com/api instead of http://localhost/api.

You can work with different variables for each different environment, using the ready-made configuration that the webpack template provides. If you use another template, make sure you find an equivalent feature or use a library like dotenv to manage your environment variables.

Conclusion

In this article, you learned how to use environment variables in projects built with Vue CLI 3+ and 2.

For current and future projects, it is recommended that you use @vue/cli moving forward as vue-cli has been deprecated.

If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.