Vuejs Env & Config Kullanımı

Vuejs Env & Config Kullanımı

Herkese merhabalar bu yazımızda sizlerle beraber vue projelerimizde env değişkenlere erişmeyi ve vue configurasyon işlemlerinden bahsetmeye çalışacağım, dilerseniz hemen başlayalım.

Proje Oluşturma;

Vue Cli kullanarak proje oluşturmak için 
vue create hello-world

Env Değerlerini Okuma ;

Projemiz ana dizinine gelip .env dosyamızı oluşturup ardından içerisine ilgili env değerlerimizi tanımlıyoruz. Env tanımlarımız VUE_APP_[DEGER] şeklinde tanımlanmaktadır.

VUE_APP_AD=YASİN
VUE_APP_DB=localhost::1111

ilgili env değerlerinin tanımlaması yapıldıktan sonra kullanmak için ;

process.env.AD
process.env.DB

diyerek oluşturulan env değerlerine ulaşılabilir.

Vue Config ;

Vue uygulamalarımızda configler için ana dizinde vue.config.js dosyamızı oluşturup içerisine çeşitli configurasyonlar yapabiliriz. Aşağıda tanımladığım bir kaç configurasyona göz atalım ;

module.exports = {
publicPath: '/test',
outputDir:  'customDist',
assetsDir:   'customAssetsDir',
filenameHashing: false,
productionSourceMap:false,
devServer:{
 https:false,
 port:8050,
 compress:true,
 host:'127.0.0.50',
 headers:{
   'X-Custom-Header-Val':'Yasin'
  }
//...
}
}

yukarıdaki configlere bakacak olursak publicPath diyerek uygulamamızın subdomain’de mi kök domainde (/) mi yer alacağını belirtebiliyoruz.

default olarak publicPath kök dizin olarak ayarlanmıştır.

outputDir ise build aldıktan sonra default olarak çıkardığı dist klasörü yerine customDist adında bir klasöre build almasını istediğimizi belirtiyoruz.

assetsDir ise default olarak assets klasörü şeklinde değilde customAssetsDir olarak çıkarmak istediğimizi belirtiyoruz buradaki assetlerin build alındıktan sonra yukarıdaki örnek için customDist klasörünün altına yerleşeceğini unutmayın.

filenameHashing ise dosyaları build alındıktan sonra hashleyip hashlemek istemediğimizi belirtiyoruz.

productionSourceMap ise aynı şekilde build alındıktan sonra map dosyalarının oluşturulup oluşturmayacağını belirtiyoruz.

devserver altında yer alan ;

https ise development ortamında http mi yoksa https mi olacağını belirtebiliyoruz.

compress ile dosyaları sıkıştırıp sıkıştırmayacağımızı,

port ile hangi portta ayağa kaldıracağını,

host ile hangi hostta uygulamanın ayağa kalkacağı,

headers ise giden api isteklerine eklenmesini istediğimiz header bilgileri

ve daha fazlasını yapabilmekteyiz.

Bunun için webpack dev server dökümanına bakabilirsiniz.

Vuejs kendi dökümanına bakabilirsiniz.

Kanalımdaki videoya göz atabilirsiniz.

Kaynak kodları ise burada.

Herkese İyi Çalışmalar Dilerim.