Wie verwende ich .env-Variablen in Nuxt 2 und 3?

Verwenden von .env-Variablen in Nuxt 2 oder 3

Beim Einbinden externer Konfigurationen in Nuxt ist es notwendig, die .env-Datei zu nutzen Sensible Daten können später in der Nuxt-Konfiguration gespeichert und referenziert werden. Hier ist eine umfassende Anleitung, wie Sie dies erreichen können.

In Nuxt 2.13 und höher ist die .env-Unterstützung integriert. Um es zu nutzen, befolgen Sie diese Schritte:

• Erstellen Sie eine .env-Datei in Ihrem Projektstammverzeichnis.

• Definieren Sie Ihre Variablen, wie zum Beispiel:

  MY_VARIABLE="Hello World"

  Nach dem Login kopieren

• Importieren Sie in Ihrer nuxt.config.js die .env-Werte in die publicRuntimeConfig- oder privateRuntimeConfig-Objekte:

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

  Nach dem Login kopieren

In Nuxt 3 ist der Prozess etwas anders:

• In nuxt.config.js:

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

  Nach dem Login kopieren

• In jeder Komponente:

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

  Nach dem Login kopieren

• In Composables:

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

  Nach dem Login kopieren

Denken Sie beim Definieren von Variablen in Ihrer .env-Datei daran, die Verwendung von Leerzeichen und Sonderzeichen zu vermeiden. Zum Beispiel:

API_URL=https://example.com/api

Jetzt können Sie überall in Ihrer Nuxt-Anwendung mühelos auf diese Variablen zugreifen. Wenn Sie auf Probleme stoßen, konsultieren Sie die offizielle Nuxt-Dokumentation für weitere Informationen.

Das obige ist der detaillierte Inhalt vonWie verwende ich .env-Variablen in Nuxt 2 und 3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!