Vite konfigurieren

Wenn Sie vite von der Kommandozeile aus starten, wird Vite automatisch versuchen, eine Konfigurationsdatei namens vite.config.js im Projektstamm aufzulösen (andere JS- und TS-Erweiterungen werden ebenfalls unterstützt).

Die einfachste Konfigurationsdatei sieht wie folgt aus:

export default {
  // config options
}

Anmerkung: Vite unterstützt die Verwendung der ES-Module-Syntax in der Konfigurationsdatei, auch wenn das Projekt keinen nativen Node ESM verwendet, z.B. type: "Modul" in package.json. In diesem Fall wird die Konfigurationsdatei vor dem Laden automatisch vorverarbeitet.

Sie können auch explizit eine Konfigurationsdatei angeben, die mit der CLI-Option --config verwendet wird (aufgelöst relativ zu cwd):

vite --config my-config.js

Intellisense-Konfiguration

Da Vite mit TypeScript-Typisierungen ausgeliefert wird, können Sie die Intellisense Ihrer IDE mit jsdoc-Typ-Hinweisen nutzen:

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

Alternativ können Sie die Hilfe defineConfig verwenden, die Intellisense ohne die Notwendigkeit von jsdoc-Annotationen bieten sollte:

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

Vite unterstützt auch TypeScript-Konfigurationsdateien. Sie können vite.config.ts mit der obigen Hilfsfunktion defineConfig oder mit dem Operator satisfies verwenden:

import type { UserConfig } from 'vite'

export default {
  // ...
} satisfies UserConfig

Bedingte Konfigurationen

Wenn die Konfiguration Optionen basierend auf dem Befehl (serve oder build), dem mode, der verwendet wird, wenn es ein SSR-Build ist (isSsrBuild) oder eine Vorschau des Builds ist (isPreview), bestimmen muss, kann sie stattdessen eine Funktion exportieren:

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  if (command === 'serve') {
    return {
      // dev specific config
    }
  } else {
    // command === 'build'
    return {
      // build specific config
    }
  }
})

Es ist wichtig zu beachten, dass in der API von Vite der Wert command während der Entwicklung serve ist (im Cli sind vite, vite dev und vite serve Aliase), und build bei der Erstellung für die produktive Umgebung (vite build).

isSsrBuild und isPreview sind zusätzliche optionale Flags, um die Art der build bzw. serve Befehle zu unterscheiden. Einige Werkzeuge, die die Vite-Konfiguration laden, unterstützen diese Flags möglicherweise nicht und übergeben stattdessen undefined. Daher wird empfohlen, explizite Vergleiche gegen true und false zu verwenden.

Asynchrone Konfiguration

Wenn die Konfiguration asynchrone Funktionen aufrufen muss, kann sie stattdessen eine asynchrone Funktion exportieren. Und diese asynchrone Funktion kann auch durch defineConfig für verbesserte Intellisense-Unterstützung übergeben werden:

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // vite config
  }
})

Umgebungsvariablen in der Konfiguration verwenden

Umgebungsvariablen können wie üblich aus process.env bezogen werden.

Beachten Sie, dass Vite die .env-Dateien nicht standardmäßig lädt, da die zu ladenden Dateien nur nach Auswertung der Vite-Konfiguration bestimmt werden können, zum Beispiel beeinflussen die Optionen root und envDir das Ladeverhalten. Sie können jedoch die exportierte loadEnv-Hilfe verwenden, um die spezifische .env-Datei zu laden, falls erforderlich.

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite config
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})