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'
    }
  }
  }

  Salin selepas log masuk
• Gunakan pembolehubah dalam komponen anda menggunakan ini.$config.

Nuxt 3

• Import berikut:

  import { defineNuxtConfig } from 'nuxt3'

  Salin selepas log masuk

• Gunakan yang berikut dalam nuxt.config.js:

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

  Salin selepas log masuk

• Gunakan pembolehubah dalam komponen anda menggunakan useRuntimeConfig ():

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

  Salin selepas log masuk

• Gunakan pembolehubah dalam boleh komposit:

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

  Salin selepas log masuk

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!