Comment accéder aux variables .env dans Nuxt 2 ou 3 : une solution complète

Variables .env dans Nuxt 2 ou 3 : une solution complète

Nuxt.js vous permet de gérer de manière transparente les variables d'environnement via des fichiers .env, mais rencontrer des problèmes n'est pas rare. Ce guide fournit une solution étape par étape au problème récurrent d'accès aux variables .env dans la configuration de Nuxt.

Description du problème

Vous êtes confronté à un échec dans votre application Nuxt en essayant de lire variables d'environnement de .env dans nuxt.config.js ou un autre module. Les erreurs de la console indiquent qu'une clé est manquante, bien qu'elle soit spécifiée dans le fichier .env.

Cause première

Dans les versions antérieures de Nuxt, les variables .env n'étaient pas automatiquement chargées dans l'application. Des packages supplémentaires, tels que @nuxtjs/dotenv, étaient nécessaires pour faciliter le processus de chargement. Cependant, avec l'introduction de Nuxt 2.13, la gestion de dotenv est désormais intégrée au framework, éliminant le besoin de packages externes.

Solution

Pour Nuxt 2.13 ou supérieur :

1. Créez un fichier .env : Lieu un fichier .env à la racine de votre projet et spécifiez vos variables d'environnement à l'intérieur. Assurez-vous qu'il est ignoré par Git.
2. Définissez votre configuration : Dans nuxt.config.js, utilisez publicRuntimeConfig ou privateRuntimeConfig pour définir vos variables .env.

export default {
    publicRuntimeConfig: {
        myPublicVariable: process.env.PUBLIC_VARIABLE,
    },
    privateRuntimeConfig: {
        myPrivateToken: process.env.PRIVATE_TOKEN,
   }
}

3. Accédez à vos variables : Utilisez ceci. suivi du nom de la configuration pour accéder à vos variables dans les fichiers .vue ou les plugins. Par exemple : this.myPublicVariable.

Pour Nuxt 3 :

1. Configurer runtimeConfig : Dans nuxt.config.js , définissez votre configuration d'exécution.
2. Définissez votre variables : À l'intérieur de l'objet public, attribuez vos variables d'environnement à leurs clés respectives.
3. Accédez à vos variables : Utilisez useRuntimeConfig() pour accéder à vos variables dans des composants ou des composables.

import { defineNuxtConfig } from 'nuxt3'

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

Conseils supplémentaires

• Lors du ciblage du mode serveur (cible : serveur), vous pouvez mettre à jour vos variables d'environnement sans reconstruire. Exécutez simplement Yarn Start à nouveau.
• Visitez la documentation officielle de Nuxt.js pour plus d'informations sur RuntimeConfig.

Conclusion

En suivant ces étapes, vous pouvez utiliser efficacement Variables .env dans Nuxt 2 ou 3. N'oubliez pas que les fichiers .env sont précieux pour stocker des informations sensibles et des valeurs de configuration, garantissant qu'elles ne sont pas exposées aux publique.

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!