In this post, we’ll learn how to work with distinct configurations between development and production mode for Vue.js projects that use the CLI’s webpack template.

In a web app, we most likely have to access a backend API server through a URL. This URL can be something like http://localhost:8080/api while in development, and https://site.com/api in production when the project is deployed. Environment variables allow us for an easy way to change this URL automatically, according to the current state of the project.

An easy way to use environment variables with Vue and the webpack template is through files with a .env extension. These files become responsible for storing information that’s specific to the environment (development, testing, production,…)

The majority of this post applies to apps using v2.x of the Vue CLI, but environment variables are just as easy to manage in the Vue CLI v3.

The simplest way to use .env files in Vue is to create an application that already supports environment files. Let’s use the vue-cli and the webpack template for that.

With Node 8 or higher installed, run the following, where my-app is your app name:

$ npx vue-cli init webpack my-app 

This command will create an application with several files ready for use. In this post, we’re focusing only on the environment configuration, which can be accessed in the config directory:

There are two files in the config directory: dev.env.js and prod.env.js, and you’ll also have a test.env.js file if you’ve configured tests while initiating the project. These files are used in development and production mode, or in other words, when you are running the application through the npm run dev command, the dev.env.js file is used, and when you compile the project for production with the npm run build command, the prod.env.js file is used instead.

Let’s change the development file to:

dev.env.js

'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', ROOT_API: '"http://localhost/api"' })

Our development environment file has an additional variable called ROOT_API, with the value http://localhost/api.

Now let’s change the production file to:

prod.env.js

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

Here we have the same ROOT_API variable, but with a different value, which should only be used in production mode. Note how string variables need the double quotes inside the single quotes.

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

process.env.ROOT_API 

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

mounted() { console.log(process.env.ROOT_API) } 

After running npm run dev, you will see the console.log information in the browser dev tools:

If you run the npm run build command, the dist directory will be created with the application ready to be deployed to a production environment, and the variable ROOT_API will display the value http://www.site.com./api, as specified in prod.env.js.

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

If your app is using the new Vue CLI, you’ll want to instead have files like .env and .env.prod at the root of your project and include variables like this:

.env

VUE_APP_ROOT_API=http://localhost/api

.env.prod

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

The VUE_APP_ prefix is important here, and variales without that prefix won't be available in your app.