Warum erhalte ich die Fehlermeldung „ReCaptcha-Fehler: Kein Schlüssel angegeben', wenn ich .env-Variablen in Nuxt.js verwende?

Verwendung von .env-Variablen in Nuxt.js

Problem:

Beim Konfigurieren von ReCaptcha in Nuxt.js durch Lesen von Variablen Aus einer .env-Datei schlägt die Anwendung mit der Fehlermeldung „ReCaptcha-Fehler: Kein Schlüssel angegeben“ fehl. Konsolenprotokollfehler. Das Problem bleibt bestehen, obwohl der Schlüssel direkt fest codiert wurde, was auf ein Problem beim Lesen von .env-Variablen in nuxt.config hindeutet.

Lösung:

Wenn Nuxt.js Version 2.13 oder höher verwendet wird, unterstützt das Framework automatisch .env-Variablen. So greifen Sie auf Variablen aus .env zu:

1. Erstellen Sie eine .env-Datei im Projektstamm und fügen Sie Schlüssel und Werte hinzu, z. B.:

   RECAPTCHA_SITE_KEY=6L....

2. Geben Sie in nuxt.config.js die Variablen je nach Zugriff entweder unter publicRuntimeConfig oder privateRuntimeConfig an Ebene:

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

Unterschiede:

• publicRuntimeConfig kann überall aufgerufen werden.
• privateRuntimeConfig kann nur sein Wird während der SSR (serverseitig) verwendet Rendering).

Beispiel:

this.$config.myPublicVariable  // accessing from Vue.js file

Für Nuxt.js Version 3:

Variablen definieren in runtimeConfig in nuxt.config.js:

import { defineNuxtConfig } from 'nuxt3'

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

In Komponenten oder Composables:

import { useRuntimeConfig } from '#app'
const config = useRuntimeConfig()

Weitere Informationen finden Sie in der offiziellen Nuxt.js-Dokumentation:
https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config /

Das obige ist der detaillierte Inhalt vonWarum erhalte ich die Fehlermeldung „ReCaptcha-Fehler: Kein Schlüssel angegeben', wenn ich .env-Variablen in Nuxt.js verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!