In der modernen Webentwicklung ist die Verwaltung vertraulicher Daten wie API-Schlüssel, Datenbankanmeldeinformationen und verschiedener Konfigurationen für verschiedene Umgebungen von entscheidender Bedeutung. Das direkte Speichern dieser Variablen im Code kann Sicherheitsrisiken bergen und die Bereitstellung erschweren. Vite, ein modernes Front-End-Build-Tool, bietet eine einfache Möglichkeit, Umgebungsvariablen über .env-Dateien zu verwalten.

Was ist eine .env-Datei?

Eine .env-Datei ist eine einfache Konfigurationsdatei, die zum Definieren umgebungsspezifischer Variablen verwendet wird. Auf diese Variablen kann innerhalb Ihrer Anwendung zugegriffen werden, während sie vom Quellcode getrennt bleiben. Diese Vorgehensweise ermöglicht eine einfache Verwaltung verschiedener Umgebungen – Entwicklung, Staging und Produktion – ohne dass sensible Daten fest codiert werden müssen.

Umgebungsvariablen in Vite:

Vite verfügt über eine integrierte Unterstützung für Umgebungsvariablen, die es einfacher macht, unterschiedliche Werte basierend auf der aktuellen Umgebung einzufügen. So geht Vite mit Umgebungsvariablen um:

Globale Variablen: Vite fügt Umgebungsvariablen zur Erstellungszeit ein.
Variablen mit Präfix: Nur Variablen mit dem Präfix VITE_ werden aus Sicherheitsgründen dem clientseitigen JavaScript-Code angezeigt. Auf Variablen, die nicht auf diese Weise vorangestellt sind, kann im Browser nicht zugegriffen werden.

Beispiel einer Vite-Umgebungsvariablen:

VITE_API_URL=https://api.example.com

Einrichten von .env-Dateien in Vite
Vite unterstützt mehrere .env-Dateien, sodass Sie Umgebungsvariablen für bestimmte Umgebungen definieren können. Hier ist ein typisches Setup:

.env: Standarddatei für Umgebungsvariablen, die in allen Umgebungen gemeinsam genutzt werden.
.env.development: Für die Entwicklungsumgebung spezifische Variablen.
.env.produktion: Für die Produktionsumgebung spezifische Variablen.

Beispiel-.env-Datei:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

Beispiel für eine .env.development-Datei:

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

Beispiel-.env.produktionsdatei:

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

Zugriff auf Umgebungsvariablen in Vite

Um auf Umgebungsvariablen in Ihrem Vite-Projekt zuzugreifen, verwenden Sie das Objekt import.meta.env.

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite ersetzt automatisch import.meta.env-Werte während des Build-Prozesses basierend auf der aktuellen Umgebung.

Verwaltung mehrerer Umgebungen:

Vites .env-Dateien können für verschiedene Umgebungen wie Entwicklung, Staging und Produktion angepasst werden. Je nachdem, in welcher Umgebung Sie sich befinden, lädt Vite die entsprechende .env-Datei:

Beim Ausführen von vite wird die Datei .env.development geladen.
Beim Ausführen von vite build wird die Datei .env.produktion geladen.
Ausführung in einer bestimmten Umgebung:

vite --mode staging

Debugging-Umgebungsvariablen:

Wenn Sie Probleme mit Umgebungsvariablen haben, die nicht wie erwartet funktionieren, überprüfen Sie Folgendes:

• Variablenpräfix: Stellen Sie sicher, dass alle clientseitigen Variablen das Präfix VITE_ haben, da Vite Variablen ohne dieses Präfix ignoriert.
• Env-Ladereihenfolge: Stellen Sie sicher, dass sich .env- und umgebungsspezifische Dateien im Projektstammverzeichnis befinden und korrekt benannt sind.
• Überprüfen Sie den Build-Prozess: Verwenden Sie console.log(import.meta.env), um alle verfügbaren Umgebungsvariablen während der Entwicklung anzuzeigen.

Abschluss::

Vites integrierte Unterstützung für Umgebungsvariablen über .env-Dateien erleichtert die Verwaltung von Konfigurationen in verschiedenen Umgebungen.