Astro konfigurieren

Passe die Funktionsweise von Astro an, indem du die Datei astro.config.mjs zu deinem Projekt hinzuf√ľgst. Dies ist eine g√§ngige Datei in Astro-Projekten, die standardm√§√üig in allen offiziellen Vorlagen und Themes enthalten ist.

ūüďö In Astros API-Konfigurationsreferenz¬†(EN) findest du eine Gesamt√ľbersicht aller unterst√ľtzter Konfigurationsoptionen.

Eine g√ľltige Astro-Konfigurationsdatei exportiert ihre Konfiguration mithilfe des default-Exports und der empfohlenen Hilfsfunktion defineConfig:

astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({
// F√ľge deine Konfigurationsoptionen hier ein...
// https://docs.astro.build/de/reference/configuration-reference/
})

Die Verwendung von defineConfig() wird f√ľr automatische Typhinweise in der IDE empfohlen, ist aber optional. Eine minimale, g√ľltige Konfiguration w√ľrde so aussehen:

astro.config.mjs
// Beispiel: Minimale, leere Konfigurationsdatei
export default {}

Unterst√ľtzte Konfigurationsdateitypen

Abschnitt betitelt Unterst√ľtzte Konfigurationsdateitypen

Astro unterst√ľtzt mehrere Dateiformate f√ľr seine Konfigurationsdatei: astro.config.js, astro.config.mjs, astro.config.cjs und astro.config.ts.

Das Laden von TypeScript-Konfigurationsdateien erfolgt mithilfe von tsm und ber√ľcksichtigt die tsconfig-Optionen deines Projektes.

Auflösen von Konfigurationsdateien

Abschnitt betitelt Auflösen von Konfigurationsdateien

Astro versucht automatisch, eine Konfigurationsdatei mit dem Namen astro.config.mjs im Stammverzeichnis deines Projekts aufzulösen. Wenn keine Konfigurationsdatei dort gefunden wurde, werden die Standardoptionen von Astro verwendet.

Terminal-Fenster
# Beispiel: Liest deine Konfiguration aus ./astro.config.mjs
astro build

Du kannst mit der Kommandozeilenoption --config eine Konfigurationsdatei explizit festlegen. Der Dateipfad wird dabei relativ zum aktuellen Arbeitsverzeichnis aufgel√∂st, in dem der astro-Befehl ausgef√ľhrt wurde.

Terminal-Fenster
# Beispiel: Liest deine Konfiguration aus dieser Datei
astro build --config my-config-file.js

Astro empfiehlt die Verwendung der Hilfsfunktion defineConfig() in deiner Konfiguration. defineConfig() bietet automatisches IntelliSense in deiner IDE. Editoren wie VS Code sind in der Lage, Astros TypeScript-Typdefinitionen zu lesen und automatische JSDoc-Typhinweise zu liefern, selbst wenn deine Konfiguration nicht in TypeScript geschrieben ist.

astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({
// F√ľge deine Konfigurationsoptionen hier ein...
// https://docs.astro.build/en/reference/configuration-reference/
})

Du kannst au√üerdem VS Code auch manuell Typdefinitionen zur Verf√ľgung stellen, indem du diese JSDoc-Notation verwendest:

astro.config.mjs
export default /** @type {import('astro').AstroUserConfig} */ ({
// F√ľge deine Konfigurationsoptionen hier ein...
// https://docs.astro.build/en/reference/configuration-reference/
}

Wenn du einen relativen Pfad an root oder die Kommandozeilenoption --root √ľbergibst, wird Astro diesen relativ zum aktuellen Arbeitsverzeichnis aufl√∂sen, in dem du den astro-Befehl ausgef√ľhrt hast.

astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({
// Wird ins Verzeichnis "./foo" im aktuellen Arbeitsverzeichnis aufgelöst
root: 'foo'
})

Astro löst alle anderen relativen Datei- und Verzeichnis-strings relativ zum Projektstammverzeichnis auf:

astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({
// Wird ins Verzeichnis "./foo" im aktuellen Arbeitsverzeichnis aufgelöst
root: 'foo',
// Wird ins Verzeichnis "./foo/public" im aktuellen Arbeitsverzeichnis aufgelöst
publicDir: 'public',
})

Um eine Datei oder ein Verzeichnis relativ zur Konfigurationsdatei zu referenzieren, verwende import.meta.url (es sei denn, du schreibst eine common.js-Datei astro.config.cjs)

astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({
// Wird ins Verzeichnis "./foo" relativ zu dieser Konfigurationsdatei aufgelöst
root: new URL("./foo", import.meta.url),
// Wird ins Verzeichnis "./public" relativ zu dieser Konfigurationsdatei aufgelöst
publicDir: new URL("./public", import.meta.url),
})

F√ľr von Astro verarbeiteten Code, z. B. importierte JavaScript- oder CSS-Dateien, kannst du die Ausgabedateinamen mit entryFileNames, chunkFileNames, und assetFileNames in einem vite.build.rollupOptions-Eintrag in deiner astro.config.*-Datei anpassen.

astro.config.mjs
import { defineConfig } from 'astro/config'
export default defineConfig({
vite: {
build: {
rollupOptions: {
output: {
entryFileNames: 'entry.[hash].mjs',
chunkFileNames: 'chunks/chunk.[hash].mjs',
assetFileNames: 'assets/asset.[hash][extname]',
},
},
},
},
})

Dies kann hilfreich sein, wenn du Skripts mit Namen hast, die von Werbeblockern blockiert werden (z.B. ads.js oder google-tag-manager.js).

ūüďö In Astros API-Konfigurationsreferenz¬†(EN) findest du eine Gesamt√ľbersicht aller unterst√ľtzter Konfigurationsoptionen.