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 findest du eine Gesamtübersicht aller unterstützter Konfigurationsoptionen.

Die Astro-Konfigurationsdatei

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

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:

// Beispiel: Minimale, leere Konfigurationsdatei
export default {}

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

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.

# 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.

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

IntelliSense-Konfiguration

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.

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:

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

Referenzierung relativer Dateien

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.

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:

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)

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),
})

Anpassen von Ausgabedateinamen

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.

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).

Konfigurationsreferenz