Behebung des Vite-Fehlers für ReactJS – Global ist nicht definiert und Prozess ist nicht definiert

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 Defined“ 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äufiger auftretenden Fehler führen. Uncaught ReferenceError: Prozess ist nicht definiert.

Auch hier gibt es viele Lösungen im Internet und einige sind veraltet. Meiner Meinung nach ist es am relevantesten und am einfachsten zu implementieren, 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!

Das obige ist der detaillierte Inhalt vonBehebung des Vite-Fehlers für ReactJS – Global ist nicht definiert und Prozess ist nicht definiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!