Cara Mengakses Pembolehubah .env dalam Nuxt 2 atau 3: Penyelesaian Komprehensif

.env Pembolehubah dalam Nuxt 2 atau 3: Penyelesaian Komprehensif

Nuxt.js membolehkan anda menguruskan pembolehubah persekitaran dengan lancar melalui fail .env, tetapi menghadapi masalah tidak tak biasa. Panduan ini menyediakan penyelesaian langkah demi langkah kepada masalah berulang mengakses pembolehubah .env dalam konfigurasi Nuxt.

Penerangan Isu

Anda menghadapi kegagalan dalam aplikasi Nuxt anda semasa cuba membaca pembolehubah persekitaran daripada .env dalam nuxt.config.js atau modul lain. Ralat konsol menunjukkan bahawa kunci tiada, walaupun dinyatakan dalam fail .env.

Punca Punca

Dalam versi Nuxt yang terdahulu, pembolehubah .env tidak dimuatkan secara automatik ke dalam aplikasi. Pakej tambahan, seperti @nuxtjs/dotenv, diperlukan untuk memudahkan proses pemuatan. Walau bagaimanapun, dengan pengenalan Nuxt 2.13, pengendalian dotenv kini terbina dalam rangka kerja, menghapuskan keperluan untuk pakej luaran.

Penyelesaian

Untuk Nuxt 2.13 ke atas:

1. Buat fail .env: Letakkan fail .env pada akar projek anda dan nyatakan pembolehubah persekitaran anda di dalamnya. Pastikan ia diabaikan oleh Git.
2. Tentukan konfigurasi anda: Dalam nuxt.config.js, gunakan publicRuntimeConfig atau privateRuntimeConfig untuk mentakrifkan pembolehubah .env anda.

export default {
    publicRuntimeConfig: {
        myPublicVariable: process.env.PUBLIC_VARIABLE,
    },
    privateRuntimeConfig: {
        myPrivateToken: process.env.PRIVATE_TOKEN,
   }
}

3. Akses pembolehubah anda: Gunakan ini. diikuti dengan nama konfigurasi untuk mengakses pembolehubah anda dalam fail atau pemalam .vue. Contohnya: this.myPublicVariable.

Untuk Nuxt 3:

1. Konfigurasikan runtimeConfig: Dalam nuxt.config.js , tentukan konfigurasi masa jalan anda.
2. Tentukan pembolehubah anda: Di dalam objek awam, tetapkan pembolehubah persekitaran anda kepada kunci masing-masing.
3. Akses pembolehubah anda: Gunakan useRuntimeConfig() untuk mengakses pembolehubah anda dalam komponen atau composable.

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
    runtimeConfig: {
        public: {
            secret: process.env.SECRET,
        }
    }
}

Petua Tambahan

• Apabila menyasarkan mod pelayan (sasaran: pelayan), anda boleh kemas kini pembolehubah persekitaran anda tanpa membina semula. Cukup jalankan benang mula semula.
• Lawati dokumentasi Nuxt.js rasmi untuk mendapatkan maklumat lanjut tentang RuntimeConfig.

Kesimpulan

Dengan mengikuti langkah ini, anda boleh menggunakan dengan berkesan pembolehubah .env dalam Nuxt 2 atau 3. Ingat, fail .env adalah berharga untuk menyimpan maklumat sensitif dan nilai konfigurasi, memastikan ia tidak didedahkan kepada orang ramai.

Atas ialah kandungan terperinci Cara Mengakses Pembolehubah .env dalam Nuxt 2 atau 3: Penyelesaian Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!