Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Vue.js Projelerinde Ortam Değişkenleri (.env) Nasıl Kullanılır?

Web uygulamaları geliştirirken genellikle bir arka uç (backend) API ile iletişim kurmanız gerekir.
Yerel ortamda bu adres http://localhost:8080/api olabilir.
Canlı ortamda ise https://api.rabisu.cloud gibi farklı bir adres kullanılır.

Bu adresleri elle değiştirmek yerine Ortam Değişkenleri (Environment Variables) kullanabilirsiniz.
Bu rehberde Vue.js projelerinde .env dosyalarıyla ortam bazlı yapılandırma yapmayı öğreneceksiniz.

Bu Rehberde Ne Öğreneceksiniz?​

  • Vue CLI projelerinde .env dosyalarının yapısı
  • VUE_APP_ önekinin neden zorunlu olduğu
  • Development ve Production modları arasındaki farklar
  • Vue CLI 2 projelerinde ortam değişkeni kullanımı

Ön Gereksinimler​

  • Bilgisayarınızda Node.js kurulu olmalıdır
  • Temel Vue.js proje yapısına aşina olmanız önerilir

1️⃣ Vue CLI 3+ ile .env Dosyalarını Kullanma​

Vue CLI 3 ve üzeri sürümlerde ortam değişkenleri proje kök dizininde tanımlanır.

Proje Oluşturma​

npx @vue/cli create rabisu-env-projesi
cd rabisu-env-projesi
  • Bu komut yeni bir Vue projesi oluşturur.

Geliştirme Ortamı Yapılandırması​

  1. Proje kök dizininde .env dosyası oluşturun.
VUE_APP_ANA_API=http://localhost:3000/api
  • Bu dosya development modunda otomatik kullanılır.

Üretim Ortamı Yapılandırması​

  1. Canlı ortam için .env.production dosyası oluşturun.
VUE_APP_ANA_API=https://api.rabisu.cloud/v1
  • Vue.js sadece VUE_APP_ ile başlayan değişkenleri uygulamaya dahil eder.

Ortam Değişkenini Kod İçinde Kullanma​

  1. Tanımlanan değişkenlere process.env üzerinden erişilir.
console.log(process.env.VUE_APP_ANA_API)
  • Bu kod aktif API adresini konsola yazdırır.

Örnek Kullanım

<script>
export default {
  name: 'HelloWorld',
  mounted() {
    console.log('Aktif API:', process.env.VUE_APP_ANA_API)
  },
}
</script>
  • Bu kod bileşen yüklendiğinde aktif ortam değişkenini gösterir.

Uygulamayı Çalıştırma

  • Geliştirme modu:
npm run serve

.env dosyası kullanılır.

  • Üretim modu:
npm run serve -- --mode=production
  • .env.production dosyası kullanılır.

2️⃣ Vue CLI 2 ile Ortam Değişkenleri​

  1. Eski Vue CLI 2 projelerinde yapılandırma config klasörü altındadır.

Geliştirme Ortamı​

// config/dev.env.js
module.exports = {
  NODE_ENV: '"development"',
  ROOT_API: '"http://localhost:3000/api"'
}
  • Bu dosya npm run dev sırasında kullanılır.

Üretim Ortamı​

// config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  ROOT_API: '"https://api.rabisu.cloud/v1"'
}
  • Bu dosya npm run build sırasında kullanılır.

Kod İçinde Kullanım​

console.log(process.env.ROOT_API)
  • Bu kod ortam bazlı API adresini gösterir.

❓ Sıkça Sorulan Sorular (SSS)​

1. Değişkenim neden undefined geliyor? Değişken adının VUE_APP_ ile başladığından emin olun. Sunucuyu yeniden başlatmayı unutmayın.

2. .env dosyasına gizli anahtar koyabilir miyim? Hayır. Vue istemci taraflıdır. Tüm değişkenler tarayıcıda görülebilir.

3. .env.local ne işe yarar? Sadece yerel makinede geçerlidir. Git deposuna eklenmez.

✅ Sonuç​

Bu rehberde Vue.js projelerinde ortam değişkenlerini güvenli ve doğru şekilde kullanmayı öğrendiniz. Kodunuzu değiştirmeden farklı ortamlara kolayca dağıtım yapabilirsiniz.

Vue.js projelerinizi güvenle yayınlamak için Rabisu Bulut altyapısının sunduğu ölçeklenebilir çözümleri hemen deneyebilirsiniz.