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"

• 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,
  },
  }

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,
    },
  },
  })

• Dans n'importe quel composant :

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

• Dans les composables :

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

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!