So greifen Sie in Nuxt 2 oder 3 auf .env-Variablen zu: Eine umfassende Lösung

.env-Variablen in Nuxt 2 oder 3: Eine umfassende Lösung

Mit Nuxt.js können Sie Umgebungsvariablen nahtlos über .env-Dateien verwalten, es treten jedoch keine Probleme auf ungewöhnlich. Diese Anleitung bietet eine Schritt-für-Schritt-Lösung für das wiederkehrende Problem beim Zugriff auf .env-Variablen in der Nuxt-Konfiguration.

Problembeschreibung

Beim Leseversuch tritt in Ihrer Nuxt-Anwendung ein Fehler auf Umgebungsvariablen aus .env in nuxt.config.js oder einem anderen Modul. Konsolenfehler weisen darauf hin, dass ein Schlüssel fehlt, obwohl er in der .env-Datei angegeben ist.

Ursache

In früheren Versionen von Nuxt wurden .env-Variablen nicht automatisch in die Anwendung geladen. Um den Ladevorgang zu erleichtern, waren zusätzliche Pakete wie @nuxtjs/dotenv erforderlich. Mit der Einführung von Nuxt 2.13 ist die Handhabung von Dotenv nun jedoch in das Framework integriert, sodass keine externen Pakete mehr erforderlich sind.

Lösung

Für Nuxt 2.13 oder höher:

1. Erstellen Sie eine .env-Datei: Platzieren Sie eine .env-Datei im Stammverzeichnis Ihres Projekts und geben Sie darin Ihre Umgebungsvariablen an. Stellen Sie sicher, dass es von Git ignoriert wird.
2. Definieren Sie Ihre Konfiguration: Verwenden Sie in nuxt.config.js publicRuntimeConfig oder privateRuntimeConfig, um Ihre .env-Variablen zu definieren.

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

3. Greifen Sie auf Ihre Variablen zu: Verwenden Sie dies. gefolgt vom Konfigurationsnamen, um auf Ihre Variablen in .vue-Dateien oder Plugins zuzugreifen. Zum Beispiel: this.myPublicVariable.

Für Nuxt 3:

1. runtimeConfig konfigurieren: In nuxt.config.js , definieren Sie Ihre Laufzeitkonfiguration.
2. Definieren Sie Ihre Variablen: Weisen Sie innerhalb des öffentlichen Objekts Ihre Umgebungsvariablen ihren jeweiligen Schlüsseln zu.
3. Greifen Sie auf Ihre Variablen zu:Verwenden Sie useRuntimeConfig(), um auf Ihre Variablen in Komponenten oder Composables zuzugreifen.

import { defineNuxtConfig } from 'nuxt3'

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

Zusätzliche Tipps

• Wenn Sie auf den Servermodus (Ziel: Server) abzielen, können Sie dies tun Aktualisieren Sie Ihre Umgebungsvariablen, ohne sie neu zu erstellen. Führen Sie einfach „garn start“ erneut aus.
• Weitere Informationen zu RuntimeConfig finden Sie in der offiziellen Nuxt.js-Dokumentation.

Fazit

Wenn Sie diese Schritte befolgen, können Sie es effektiv nutzen .env-Variablen in Nuxt 2 oder 3. Denken Sie daran, dass .env-Dateien wertvoll für die Speicherung vertraulicher Informationen und Konfigurationswerte sind und sicherstellen, dass sie nicht der Öffentlichkeit zugänglich gemacht werden.

Das obige ist der detaillierte Inhalt vonSo greifen Sie in Nuxt 2 oder 3 auf .env-Variablen zu: Eine umfassende Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!