Pourquoi est-ce que je reçois une « Erreur ReCaptcha : Aucune clé fournie » lors de l'utilisation de variables .env dans Nuxt.js ?

Utilisation de variables .env dans Nuxt.js

Problème :

Lors de la configuration de ReCaptcha dans Nuxt.js en lisant des variables à partir d'un fichier .env, l'application échoue avec une « Erreur ReCaptcha : Aucune clé fournie » erreur de journal de la console. Le problème persiste malgré le codage en dur de la clé directement, suggérant un problème de lecture des variables .env dans nuxt.config.

Résolution :

Si Nuxt.js version 2.13 ou supérieur est utilisé, le framework prend automatiquement en charge les variables .env. Pour accéder aux variables depuis .env :

1. Créez un fichier .env à la racine du projet et ajoutez des clés et des valeurs, par exemple :

   RECAPTCHA_SITE_KEY=6L....

2. Dans nuxt.config.js, spécifiez les variables sous publicRuntimeConfig ou privateRuntimeConfig, en fonction de l'accès niveau :

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

Différences :

• publicRuntimeConfig est accessible n'importe où.
• privateRuntimeConfig ne peut être utilisé pendant SSR (côté serveur rendu).

Exemple :

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

Pour Nuxt.js version 3 :

Définir des variables dans runtimeConfig dans nuxt.config.js :

import { defineNuxtConfig } from 'nuxt3'

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

Dans les composants ou composables :

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

Pour plus d'informations, reportez-vous à la documentation officielle de Nuxt.js :
https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config /

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!