So laden Sie Umgebungsvariablen aus einer .env-Datei mit Vite

Ich möchte Umgebungsvariablen aus laden .env Datei verwenden Vite

Ich habe das verwendet import.meta.env Objekt wie in erwähnt Dokumente

.env Datei:

TEST_VAR=123F

beim Versuch, über die auf diese Variable zuzugreifen import.meta.env -> import.meta.env.TEST_VAR es gibt undefiniert zurück.

Wie kann ich also darauf zugreifen?

Entsprechend der Dokumentemüssen Sie Ihren Variablen ein Präfix voranstellen VITE_:

Um zu verhindern, dass env-Variablen versehentlich an den Client weitergegeben werden, werden Ihrem von Vite verarbeiteten Code nur Variablen mit dem Präfix VITE_ angezeigt.

Wenn Sie versuchen, auf Umgebungsvariablen außerhalb Ihres App-Quellcodes zuzugreifen (z. B. innerhalb vite.config.js), dann müssen Sie verwenden loadEnv():

import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {
    // Load app-level env vars to node-level env vars.
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    return defineConfig({
      // To access env vars here use process.env.TEST_VAR
    });
}

Für svelteKit

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, loadEnv } from 'vite';

/** @type {import('vite').UserConfig} */
export default ({ mode }) => {
    // Extends 'process.env.*' with VITE_*-variables from '.env.(mode=production|development)'
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};
    return defineConfig({
        plugins: [sveltekit()]
    }); 
};

Wenn Sie auf Ihre Umgebungsvariable TEST_VAR zugreifen möchten, sollten Sie ihr das Präfix voranstellen VITE_

Versuchen Sie so etwas wie

VITE_TEST_VAR=123f

Sie können mit darauf zugreifen

import.meta.env.VITE_TEST_VAR

Hier sind drei Fehler/Fallstricke, die mich zum Stolpern gebracht haben.

• Stellen Sie sicher, dass sich die .env-Dateien im Stammverzeichnis befinden, nicht im src Verzeichnis. Der Dateiname .env und/oder .env.development funktioniert, wenn es lokal ausgeführt wird.
• Starten Sie den lokalen Webserver neu, damit die Variablen angezeigt werden: npm run dev
• Stellen Sie den Variablen ein Präfix voran VITE_ (wie bereits von Mahmoud und Wonkledge erwähnt)

Eine andere Lösung, die für mich funktioniert hat, ist der manuelle Anruf dotenv.config() im Inneren vite.config.js. Dadurch werden Variablen geladen .env (alle!) hinein process.env:

import { defineConfig } from 'vite'
import dotenv from 'dotenv'

dotenv.config() // load env vars from .env

export default defineConfig({
  define: {
    __VALUE__: `"${process.env.VALUE}"` // wrapping in "" since it's a string
  },
  //....
}

Wo .env Datei könnte sein:

VALUE='My env var value'

Sehen die Demo.

Ich hatte das gleiche Problem und habe es durch Ausführen gelöst

pnpm add dot-env
pnpm add -S  dotenv-webpack. 

Zuletzt habe ich dafür gesorgt, dass ich hinzugefügt habe VITE_ vor dem Namen, den ich für meine Umgebungsvariable hatte, also von MAP_API_KEY Zu VITE_MAP_API_KEY.

Wie angegeben in Dokumentekönnen Sie das Präfix mit mdoify ändern envPrefix.

Env-Variablen beginnend mit envPrefix wird Ihrem Client-Quellcode über import.meta.env zugänglich gemacht.

Also ändere es in TEST_ wird auch funktionieren.

export default defineConfig({
...
  envPrefix: 'TEST_',
...
})

Sie können diese Option beliebig ändern außer für leere Zeichenfolge('').

envPrefix sollte nicht als festgelegt werden '', wodurch alle Ihre Umgebungsvariablen offengelegt werden und ein unerwarteter Verlust vertraulicher Informationen verursacht wird. Vite gibt bei der Erkennung einen Fehler aus ''.

Daher könnte es eine unangemessene Aktion sein, die dotenv-Konfiguration direkt zu überschreiben, um das Präfix vollständig zu entfernen, da alle in env geschriebenen Felder direkt an den Client gesendet würden.

Ich hatte das gleiche Problem und das Problem bestand darin, dass ich meine .env.local-Datei im src-Ordner statt im Stammverzeichnis erstellt hatte. Wenn Sie das ändern, funktioniert es problemlos, indem Sie die Variable während des Vorgangs „import.meta“ aufrufen .env”