In einem Szenario, in dem Sie eine Vite-App mit einer ReactJS-Vorlage für ein Projekt ausführen und versuchen, die Umgebungsvariable aus der .env-Datei abzurufen. Die gängige Methode zum Abrufen der Umgebungsvariablen aus .env ist die Verwendung von „process.env.SOMETHING“ für die Variable als:

SOMETHING=SECRETSAUCE

Zu diesem Zeitpunkt würde die vite.config.ts so aussehen:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Aber das Abrufen von Variablen funktioniert in Vite nicht sofort und es gibt viele Möglichkeiten, das Problem zu lösen. Ich habe die meisten davon ausprobiert und hatte das Gefühl, dass ich bei der einfachen und unkomplizierten Methode bleiben möchte.

Wahrscheinlich hätten Sie mit der obigen Definition und der Standard-Abruflogik mit „process.env.*“ den Fehler „Uncaught ReferenceError: global is not definiert“ erhalten.

Ich finde viele Referenzen im Stackoverflow und bin verwirrt.

Die Fehlerbehebung besteht darin, global in der Konfiguration wie folgt zu definieren.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
})

Dies würde wahrscheinlich zu einem weiteren häufigeren Fehler führen. Uncaught ReferenceError: Prozess ist nicht definiert.

Auch hier gibt es viele Lösungen im Internet und einige sind veraltet. Ich finde, dass es am relevantesten und am einfachsten zu implementierenden ist, LoadEnv aus der Vite-Bibliothek zu importieren und die benutzerdefinierte Logik wie folgt zu erstellen.

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      global: {},
      'process.env': env
    },
    plugins: [react()],
  }
})

Und die Magie passiert sofort!!

Außerdem ist zu erwähnen, dass wir die dotenv-Abhängigkeit nicht verwenden müssen, da das Abrufen von Umgebungsvariablen im Code mit „process.env.*“ auch ohne sie gut funktioniert.

Viel Spaß beim Codieren!