Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

How to Use Environment Variables (.env) in Vue.js Projects?

When developing web applications, you often need to communicate with a backend API.
In the local environment, this address might be http://localhost:8080/api.
In the live environment, a different address such as https://api.ornek.com is used.

Instead of changing these addresses manually, you can use Environment Variables.
In this guide, you will learn how to make environment-based configuration with .env files in Vue.js projects.

What Will You Learn in This Guide?​

  • Structure of .env files in Vue CLI projects
  • Why the VUE_APP_ prefix is mandatory
  • Differences between Development and Production modes
  • Using environment variables in Vue CLI 2 projects

Prerequisites​

  • Node.js must be installed on your computer
  • It is recommended that you become familiar with the basic Vue.js project structure

1️⃣ Using .env Files with Vue CLI 3+​

In Vue CLI 3 and above, environment variables are defined in the project root directory.

Creating a Project​

npx @vue/cli create genixnode-env-projesi
cd genixnode-env-projesi
  • This command creates a new Vue project.

Development Environment Configuration​

  1. Create .env file in the project root directory.
VUE_APP_ANA_API=http://localhost:3000/api
  • This file is used automatically in development mode.

Production Environment Configuration​

  1. Create .env.production file for live environment.
VUE_APP_ANA_API=https://api.ornek.com/v1
  • Vue.js only includes variables starting with VUE_APP_.

Using the Environment Variable in Code​

  1. Defined variables are accessed via process.env.
console.log(process.env.VUE_APP_ANA_API)
  • This code prints the active API address to the console.

Sample Usage

<script>
export default {
  name: 'HelloWorld',
  mounted() {
    console.log('Aktif API:', process.env.VUE_APP_ANA_API)
  },
}
</script>
  • This code shows the active environment variable when the component is loaded.

Running the Application

  • Development mode:
npm run serve

.env file is used.

  • Production mode:
npm run serve -- --mode=production
  • .env.production file is used.

2️⃣ Environment Variables with Vue CLI 2​

  1. In older Vue CLI 2 projects, the configuration is under the config folder.

Development Environment​

// config/dev.env.js
module.exports = {
  NODE_ENV: '"development"',
  ROOT_API: '"http://localhost:3000/api"'
}
  • This file is used during npm run dev.

Production Environment​

// config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  ROOT_API: '"https://api.ornek.com/v1"'
}
  • This file is used during npm run build.

Usage in Code​

console.log(process.env.ROOT_API)
  • This code shows the environment based API address.

❓ Frequently Asked Questions (FAQ)​

1. Why does my variable appear undefined? Make sure the variable name starts with VUE_APP_. Don't forget to restart the server.

2. Can I put a private key in the .env file? No. Vue is client-side. All variables are visible in the browser.

3. What does .env.local do? It is only valid on the local machine. It is not added to the Git repository.

✅ Result​

In this guide, you learned how to use environment variables safely and correctly in Vue.js projects. You can easily distribute to different environments without changing your code.

You can immediately try the scalable solutions offered by the GenixNode infrastructure to safely publish your Vue.js projects.