Wie greife ich in Ihrem Nuxt 2- oder 3-Projekt auf Umgebungsvariablen zu?

Zugriff auf Umgebungsvariablen in Nuxt 2 oder 3: .env leicht gemacht

Bei der Verwendung von Umgebungsvariablen in Ihren Nuxt-Projekten, egal ob Nuxt 2 oder 3 ist es wichtig, den richtigen Ansatz zu verstehen. In diesem Artikel erfahren Sie, wie Sie Umgebungsvariablen aus Ihrer .env-Datei in der Nuxt-Konfiguration lesen.

In Nuxt 2.13 oder höher ist die Verwendung von @nuxtjs/dotenv nicht mehr erforderlich, da das Framework dies nativ unterstützt Umgebungsvariablen. Um Ihre Variablen zu definieren, erstellen Sie eine .env-Datei im Stammverzeichnis Ihres Projekts und füllen Sie sie mit Schlüssel-Wert-Paaren.

Nuxt 2.13 oder höher

In Ihrem Nuxt .config.js, definieren Sie Ihre Umgebungsvariablen mit publicRuntimeConfig oder privateRuntimeConfig, je nach beabsichtigter Verwendung.

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

Nuxt 3

Nuxt 3 führt das runtimeConfig-Objekt ein nuxt.config.js. Definieren Sie hier Ihre Umgebungsvariablen:

import { defineNuxtConfig } from 'nuxt3';

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

Um auf diese Variablen in Ihren Komponenten zuzugreifen, verwenden Sie this.$config in Nuxt 2 und useRuntimeConfig() in Nuxt 3.

Zugriff auf die Umgebung Variablen in Nuxt.config

Für Nuxt.config können Sie direkt auf Umgebungsvariablen zugreifen, indem Sie „process.env.VARIABLE_NAME“ verwenden.

export default {
  modules: [
    ['@nuxtjs/recaptcha', {
      siteKey: process.env.RECAPTCHA_SITE_KEY,
      version: 3,
      size: 'compact',
    }],
  ],
};

Wenn Sie diese Schritte befolgen, können Sie diese nahtlos nutzen Umgebungsvariablen in Ihren Nuxt-Projekten. Bitte beachten Sie, dass die Syntax je nach verwendetem Nuxt-Paket leicht variieren kann. Spezifische Hinweise finden Sie in der offiziellen Dokumentation.

Das obige ist der detaillierte Inhalt vonWie greife ich in Ihrem Nuxt 2- oder 3-Projekt auf Umgebungsvariablen zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!