Pourquoi ma variable .env ne fonctionne-t-elle pas dans mon application Nuxt ?

Dépannage des variables .env dans Nuxt 2 et 3

Énoncé du problème

Les applications Nuxt peuvent rencontrer une erreur lors de l'utilisation de variables .env pour configurer des modules, comme ReCaptcha. La console peut afficher « Erreur ReCaptcha : Aucune clé fournie », malgré la présence d'un fichier .env avec la clé requise.

Explication

Dans Nuxt 2.13 et supérieur, le @nuxtjs/dotenv Le module n'est plus nécessaire car la configuration d'exécution est intégrée au framework. Pour utiliser les variables .env, suivez ces étapes :

Nuxt 2.13

• Créez un fichier .env à la racine du projet.

• Importez les variables nécessaires dans nuxt.config.js :

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

• Utilisez les variables de vos composants en utilisant this.$config.

Nuxt 3

• Importez ce qui suit :

  import { defineNuxtConfig } from 'nuxt3'

• Utilisez ce qui suit dans nuxt.config.js :

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

• Utilisez le variables dans vos composants à l'aide de useRuntimeConfig() :

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

• Utilisez les variables dans les composables :

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

Nuxt 2 Pre-2.13

Si vous utilisez Nuxt 2 pré-2.13, le module @nuxtjs/dotenv est requis. Vous pouvez ajouter cette méthode à votre fichier nuxt.config.js :

import dotenv from 'dotenv'
dotenv.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!