Heim >Web-Frontend >js-Tutorial >Wie verwende ich .env-Variablen in Nuxt 2 und 3?

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

Linda Hamilton
Linda HamiltonOriginal
2024-11-13 08:28:02855Durchsuche

How to Use .env Variables in Nuxt 2 and 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"
  • 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,
    },
    }

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,
      },
    },
    })
  • In jeder Komponente:

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

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn