Mengapa Pembolehubah .env Saya Tidak Berfungsi dalam Aplikasi Nuxt Saya?

Menyelesaikan masalah Pembolehubah .env dalam Nuxt 2 dan 3

Pernyataan Masalah

Aplikasi Nuxt mungkin menghadapi ralat apabila menggunakan pembolehubah .env untuk mengkonfigurasi modul, seperti ReCaptcha. Konsol mungkin memaparkan "Ralat ReCaptcha: Tiada kunci disediakan," walaupun terdapat fail .env dengan kunci yang diperlukan.

Penjelasan

Dalam Nuxt 2.13 dan ke atas, @nuxtjs/dotenv modul tidak lagi diperlukan kerana konfigurasi runtime dibina ke dalam rangka kerja. Untuk menggunakan pembolehubah .env, ikut langkah berikut:

Nuxt 2.13

• Buat fail .env pada punca projek.

• Import pembolehubah yang diperlukan ke dalam nuxt.config.js:

  export default {
  publicRuntimeConfig: {
    recaptcha: {
      siteKey: process.env.RECAPTCHA_SITE_KEY,
      version: 3,
      size: 'compact'
    }
  }
  }

• Gunakan pembolehubah dalam komponen anda menggunakan ini.$config.

Nuxt 3

• Import berikut:

  import { defineNuxtConfig } from 'nuxt3'

• Gunakan yang berikut dalam nuxt.config.js:

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

• Gunakan pembolehubah dalam komponen anda menggunakan useRuntimeConfig ():

  <script setup lang="ts">
  const config = useRuntimeConfig()
  config.secret
  </script>

• Gunakan pembolehubah dalam boleh komposit:

  export default () => {
  const config = useRuntimeConfig()
  console.log(config.secret)
  }

Nuxt 2 Pra-2.13

Jika menggunakan Nuxt 2 pra-2.13, modul @nuxtjs/dotenv diperlukan. Anda boleh menambah kaedah ini pada fail nuxt.config.js anda:

import dotenv from 'dotenv'
dotenv.config()

Atas ialah kandungan terperinci Mengapa Pembolehubah .env Saya Tidak Berfungsi dalam Aplikasi Nuxt Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!