Warum funktioniert meine .env-Variable in meiner Nuxt-Anwendung nicht?

Fehlerbehebung bei .env-Variablen in Nuxt 2 und 3

Problembeschreibung

Nuxt-Anwendungen können auf einen Fehler stoßen, wenn sie .env-Variablen zum Konfigurieren von Modulen verwenden. wie ReCaptcha. Die Konsole zeigt möglicherweise „ReCaptcha-Fehler: Kein Schlüssel bereitgestellt“ an, obwohl eine .env-Datei mit dem erforderlichen Schlüssel vorhanden ist.

Erklärung

In Nuxt 2.13 und höher wird @nuxtjs/dotenv Das Modul ist nicht mehr erforderlich, da die Laufzeitkonfiguration in das Framework integriert ist. Um .env-Variablen zu verwenden, befolgen Sie diese Schritte:

Nuxt 2.13

• Erstellen Sie eine .env-Datei im Projektstammverzeichnis.

• Importieren Sie die erforderlichen Variablen in nuxt.config.js:

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

  Nach dem Login kopieren
• Verwenden Sie die Variablen in Ihren Komponenten mithilfe von this.$config.

Nuxt 3

• Importieren Sie Folgendes:

  import { defineNuxtConfig } from 'nuxt3'

  Nach dem Login kopieren

• Verwenden Sie Folgendes in nuxt.config.js:

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

  Nach dem Login kopieren

• Verwenden Sie die Variablen in Ihren Komponenten mit useRuntimeConfig():

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

  Nach dem Login kopieren

• Verwenden Sie die Variablen in Composables:

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

  Nach dem Login kopieren

Nuxt 2 vor 2.13

Bei Verwendung von Nuxt 2 vor 2.13 ist das Modul @nuxtjs/dotenv erforderlich. Sie können diese Methode zu Ihrer nuxt.config.js-Datei hinzufügen:

import dotenv from 'dotenv'
dotenv.config()

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine .env-Variable in meiner Nuxt-Anwendung nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!