Cara Menggunakan .env.development dan .env.production di Vite + Vue 3

Dalam pengembangan aplikasi modern menggunakan Vite + Vue 3, pengaturan konfigurasi yang fleksibel antara development dan production menjadi hal penting.
Sebagai developer, kita tentu tidak ingin mengubah URL API, token, atau variabel konfigurasi secara manual setiap kali berpindah environment.

Solusinya adalah menggunakan file .env.development dan .env.production.
Kedua file ini memungkinkan kita menyimpan variabel environment (environment variables) terpisah untuk setiap mode. Hasilnya, kode tetap bersih, aman, dan mudah dipelihara — terutama ketika proyek sudah masuk tahap deployment.

Apa Itu File .env di Vite?

File .env berfungsi untuk menyimpan variabel global proyek dalam format key–value sederhana.
Misalnya:

VITE_API_URL=https://api.example.com

Namun, ada aturan penting dari Vite:

Semua variabel yang ingin diakses dari kode Vue harus diawali dengan prefix VITE_.

Tanpa prefix tersebut, Vite akan menganggap variabel bersifat internal dan tidak akan diekspor ke sisi client (browser).
Aturan ini menjaga agar data sensitif seperti secret key atau token backend tidak bocor ke publik.

Jenis File .env yang Didukung Vite

Vite secara otomatis mengenali beberapa varian file .env sesuai mode yang aktif:

Dengan sistem ini, kamu tidak perlu menambahkan flag atau mengubah package.json.
Cukup jalankan perintah biasa, dan Vite akan memilih file environment yang sesuai.

Struktur File yang Disarankan

Struktur direktori ideal untuk proyek Vue + Vite adalah:

.env
.env.development
.env.production

Masing-masing punya perannya sendiri:

• .env → konfigurasi umum (mis. nama aplikasi, bahasa default)

• .env.development → pengaturan lokal (API dev, debug)

• .env.production → pengaturan untuk server publik (API real, optimasi)

Contoh Implementasi Lengkap

.env (global default)

VITE_APP_NAME=AntMediaHost Vue Demo
VITE_DEFAULT_LANG=id

.env.development

VITE_APP_ENV=development
VITE_API_URL=https://dev-api.domain.local
VITE_DEBUG_MODE=true

.env.production

VITE_APP_ENV=production
VITE_API_URL=https://api.domain.com
VITE_DEBUG_MODE=false

Cara Mengakses Variabel di Vue 3

Untuk membaca variabel yang telah didefinisikan, gunakan:

console.log(import.meta.env.VITE_API_URL)
console.log(import.meta.env.VITE_APP_ENV)

Contoh di src/config/api.js:

export const API_URL = import.meta.env.VITE_API_URL

Atau di dalam komponen Vue:

<script setup>
  const apiUrl = import.meta.env.VITE_API_URL
  console.log(`Endpoint aktif: ${apiUrl}`)
</script>

Dengan cara ini, kamu tidak perlu mengubah URL API di setiap mode — cukup ubah file .env yang sesuai.

Mode Otomatis Berdasarkan Command

Vite akan memilih environment file berdasarkan command yang dijalankan:

Jika kamu butuh mode tambahan seperti staging, cukup jalankan:

vite build --mode staging

Lalu buat file .env.staging:

VITE_APP_ENV=staging
VITE_API_URL=https://staging-api.antmediahost.com

Tanpa ubah kode, build otomatis menyesuaikan environment.

Perbedaan .env.development vs .env.production

Studi Kasus: API Otomatis Berdasarkan Mode

Bayangkan kamu punya dua endpoint berbeda:

• Development → https://dev-api.domain.local

• Production → https://api.domain.com

Cukup tulis satu baris di kode Vue:

const API = import.meta.env.VITE_API_URL

fetch(`${API}/posts`)
  .then(res => res.json())
  .then(data => console.log(data))

Saat mode development dijalankan, otomatis menggunakan API dev.
Begitu di-build untuk production, otomatis berpindah ke API real — tanpa ubah satu baris pun kode.
Inilah salah satu alasan mengapa .env adalah pondasi penting dalam automasi deployment modern.

Risiko Umum & Solusinya

1. Variabel tidak terbaca

Pastikan prefix VITE_ digunakan.
Contoh benar: VITE_API_URL, bukan API_URL.

2. API Key bocor ke publik

Jangan simpan secret di file .env client-side.
Semua variabel VITE_ akan muncul di hasil build (browser).

3. Konfigurasi bercampur

Pisahkan file sesuai mode dan tambahkan .env* ke .gitignore.

4. Tidak sinkron antar-tim

Buat .env.example sebagai template agar tim tahu variabel apa saja yang wajib diisi.

Script Default di package.json

Vite sudah menyediakan script standar:

"scripts": {
  "dev": "vite --mode development",
  "build": "vite build --mode production",
  "preview": "vite preview"
}

Flag --mode hanya untuk memperjelas, karena Vite sudah otomatis mengenali mode yang sesuai dengan command.

Best Practice untuk Developer Profesional

1. Gunakan environment terpisah per tahap (dev/staging/prod).

2. Simpan .env.production di server atau CI/CD, bukan di Git repository publik.

3. Selalu tambahkan .env* ke .gitignore.

4. Gunakan variable naming yang konsisten agar mudah dipelihara.

5. Audit isi file .env sebelum build untuk menghindari kebocoran data.

FAQ

Q: Mengapa variabel saya tidak muncul di browser?
Pastikan nama variabel menggunakan prefix VITE_. Tanpa prefix, variabel hanya hidup di server build.

Q: Bisakah menimpa variabel saat build?
Bisa. Gunakan:

VITE_API_URL=https://override.example.com vite build

Q: Perlukah .env.production di-commit ke Git?
Tidak disarankan. Gunakan .env.example sebagai dokumentasi, sedangkan file asli disimpan di server CI/CD atau pipeline rahasia.

Kesimpulan

File .env.development dan .env.production adalah solusi cerdas untuk memisahkan konfigurasi antar-lingkungan di Vite + Vue 3.
Dengan sistem otomatis Vite, kamu tidak perlu lagi memodifikasi package.json atau menulis script tambahan — cukup siapkan file environment dan biarkan build system bekerja untukmu.

Pendekatan ini bukan hanya meningkatkan keamanan dan efisiensi, tapi juga memastikan bahwa workflow tim tetap bersih, cepat, dan mudah direproduksi di berbagai environment.

“Satu kode, dua dunia — development dan production, semua otomatis berkat .env.development dan .env.production.”