Zum Inhalt springen

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.