Zum Inhalt springen
This is an unmaintained snapshot of the Astro v4 docs. View the latest docs.

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.

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.

Wirke mit

Worum geht es?

Community