Comment utiliser les variables .env dans Nuxt 2 et 3 ?

Utilisation de variables .env dans Nuxt 2 ou 3

Lors de l'intégration de configurations externes dans Nuxt, il est nécessaire d'exploiter le fichier .env, où les données sensibles peuvent être stockées et référencées ultérieurement dans la configuration Nuxt. Voici un guide complet pour y parvenir.

Dans Nuxt 2.13 et supérieur, la prise en charge .env est intégrée. Pour l'utiliser, suivez ces étapes :

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

• Définissez vos variables, telles que :

  MY_VARIABLE="Hello World"

  Copier après la connexion

• Dans votre nuxt.config.js, importez les valeurs .env dans publicRuntimeConfig ou Objets privateRuntimeConfig :

  export default {
  publicRuntimeConfig: {
    myPublicVariable: process.env.MY_VARIABLE,
  },
  privateRuntimeConfig: {
    myPrivateVariable: process.env.MY_PRIVATE_VARIABLE,
  },
  }

  Copier après la connexion

Dans Nuxt 3, le processus est légèrement différent :

• Dans nuxt.config.js :

  import { defineNuxtConfig } from 'nuxt3'
  
  export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      myPublicVariable: process.env.MY_VARIABLE,
    },
  },
  })

  Copier après la connexion

• Dans n'importe quel composant :

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

  Copier après la connexion

• Dans les composables :

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

  Copier après la connexion

Lorsque vous définissez des variables dans votre fichier .env, n'oubliez pas d'éviter d'utiliser des espaces et caractères spéciaux. Par exemple :

API_URL=https://example.com/api

Vous pouvez désormais accéder sans effort à ces variables n'importe où dans votre application Nuxt. Si vous rencontrez des problèmes, consultez la documentation officielle de Nuxt pour plus de conseils.

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!