Mengendalikan Pembolehubah Persekitaran di Vite

Dalam pembangunan web moden, mengurus data sensitif seperti kunci API, bukti kelayakan pangkalan data dan pelbagai konfigurasi untuk persekitaran yang berbeza adalah penting. Menyimpan pembolehubah ini secara langsung dalam kod boleh menimbulkan risiko keselamatan dan menyukarkan penggunaan. Vite, alat binaan bahagian hadapan moden, menyediakan cara mudah untuk mengurus pembolehubah persekitaran melalui fail .env.

Apakah itu Fail .env?

Fail .env ialah fail konfigurasi ringkas yang digunakan untuk menentukan pembolehubah khusus persekitaran. Pembolehubah ini boleh diakses dalam aplikasi anda sambil kekal berasingan daripada kod sumber. Amalan ini membolehkan pengurusan mudah bagi persekitaran yang berbeza—pembangunan, pementasan dan pengeluaran—tanpa pengekodan keras data sensitif.

Pembolehubah Persekitaran di Vite:

Vite hadir dengan sokongan terbina dalam untuk pembolehubah persekitaran, menjadikannya lebih mudah untuk menyuntik nilai yang berbeza berdasarkan persekitaran semasa. Begini cara Vite mengendalikan pembolehubah persekitaran:

Pembolehubah Global: Vite menyuntik pembolehubah persekitaran pada masa binaan.
Pembolehubah Awalan: Hanya pembolehubah yang diawali dengan VITE_ terdedah kepada kod JavaScript sisi klien atas sebab keselamatan. Sebarang pembolehubah yang tidak didahulukan dengan cara ini tidak akan dapat diakses dalam penyemak imbas.

Contoh pembolehubah persekitaran Vite:

VITE_API_URL=https://api.example.com

Menyediakan Fail .env dalam Vite
Vite menyokong berbilang fail .env, membolehkan anda menentukan pembolehubah persekitaran untuk persekitaran tertentu. Berikut ialah persediaan biasa:

.env: Fail lalai untuk pembolehubah persekitaran dikongsi merentas semua persekitaran.
.env.development: Pembolehubah khusus untuk persekitaran pembangunan.
.env.production: Pembolehubah khusus untuk persekitaran pengeluaran.

Contoh Fail .env:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

Contoh Fail .env.development:

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

Contoh Fail .env.production:

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

Mengakses Pembolehubah Persekitaran dalam Vite

Untuk mengakses pembolehubah persekitaran dalam projek Vite anda, gunakan objek import.meta.env.

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite secara automatik menggantikan nilai import.meta.env semasa proses binaan berdasarkan persekitaran semasa.

Mengurus Pelbagai Persekitaran:

Fail .env Vite boleh disesuaikan untuk persekitaran yang berbeza seperti pembangunan, pementasan dan pengeluaran. Bergantung pada persekitaran anda berada, Vite akan memuatkan fail .env yang sesuai:

Menjalankan vite memuatkan fail .env.development.
Menjalankan vite build memuatkan fail .env.production.
Berjalan dalam persekitaran tertentu:

vite --mode staging

Menyahpepijat Pembolehubah Persekitaran:

Jika anda menghadapi masalah dengan pembolehubah persekitaran tidak berfungsi seperti yang diharapkan, semak perkara berikut:

• Awalan Pembolehubah: Pastikan semua pembolehubah sisi klien mempunyai awalan VITE_, kerana Vite mengabaikan pembolehubah tanpa awalan ini.
• Tempahan Pemuatan Env: Pastikan .env dan fail khusus persekitaran berada dalam akar projek dan dinamakan dengan betul.
• Semak Proses Binaan: Gunakan console.log(import.meta.env) untuk melihat semua pembolehubah persekitaran yang tersedia semasa pembangunan.

Kesimpulan::

Sokongan terbina dalam Vite untuk pembolehubah persekitaran melalui fail .env memudahkan untuk mengurus konfigurasi merentas persekitaran yang berbeza.

Atas ialah kandungan terperinci Mengendalikan Pembolehubah Persekitaran di Vite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!