Comment accéder aux variables d'environnement dans votre projet Nuxt 2 ou 3 ?

Accès aux variables d'environnement dans Nuxt 2 ou 3 : .env en toute simplicité

Lors de l'utilisation de variables d'environnement dans vos projets Nuxt, que ce soit Nuxt 2 ou 3, il est essentiel de comprendre la bonne approche. Dans cet article, nous allons explorer comment lire les variables d'environnement de votre fichier .env dans la configuration de Nuxt.

Dans Nuxt 2.13 ou supérieur, l'utilisation de @nuxtjs/dotenv n'est plus nécessaire car le framework prend en charge nativement variables d'environnement. Pour définir vos variables, créez un fichier .env à la racine de votre projet et remplissez-le avec des paires clé-valeur.

Nuxt 2.13 ou supérieur

Dans votre nuxt .config.js, définissez vos variables d'environnement à l'aide de publicRuntimeConfig ou privateRuntimeConfig, en fonction de leur intention utilisation.

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

Nuxt 3

Nuxt 3 introduit l'objet runtimeConfig dans nuxt.config.js. Définissez vos variables d'environnement ici :

import { defineNuxtConfig } from 'nuxt3';

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

Pour accéder à ces variables dans vos composants, utilisez this.$config dans Nuxt 2 et useRuntimeConfig() dans Nuxt 3.

Accès à l'environnement Variables dans Nuxt.config

Pour Nuxt.config, vous pouvez accéder directement aux variables d'environnement en utilisant process.env.VARIABLE_NAME.

export default {
  modules: [
    ['@nuxtjs/recaptcha', {
      siteKey: process.env.RECAPTCHA_SITE_KEY,
      version: 3,
      size: 'compact',
    }],
  ],
};

En suivant ces étapes, vous pouvez utiliser de manière transparente les variables d'environnement dans vos projets Nuxt. Veuillez noter que la syntaxe peut varier légèrement selon le package Nuxt que vous utilisez. Reportez-vous à la documentation officielle pour obtenir des conseils spécifiques.

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!