0Pricing
Vue Academy · Lektion

CLI-Konfiguration und Plugins

Konfigurieren Sie die CLI und fügen Sie Plugins hinzu, um Ihr Projekt zu erweitern

CLI-Konfiguration und Plugins ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Den Build konfigurieren

Sowohl die Vue CLI als auch Vite ermöglichen es Ihnen, den Build über eine Konfigurationsdatei anzupassen.

  • Die Vue CLI verwendet vue.config.js
  • Vite verwendet vite.config.js

Hier fügen Sie Plugins hinzu, legen Aliase fest, konfigurieren den Entwicklungsserver und mehr.

Grundlagen von vite.config.js

Eine typische vite.config.js importiert das Vue-Plugin und exportiert ein Konfigurationsobjekt.

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

Grundlagen von vue.config.js

In Vue-CLI-Projekten exportiert vue.config.js die Konfiguration auf dieselbe Weise.

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

Plugins hinzufügen

Plugins erweitern den Build um neue Funktionen.

  • Installieren Sie sie mit npm
  • Importieren Sie sie in der Konfigurationsdatei
  • Fügen Sie sie dem plugins-Array hinzu
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

Umgebungsvariablen

Speichern Sie Konfigurationen, die sich zwischen Umgebungen ändern, in .env-Dateien.

  • .env wird überall geladen
  • .env.development wird nur für die Entwicklung verwendet
  • .env.production wird für Produktions-Builds verwendet

Umgebungsvariablen definieren

In Vite müssen Variablen mit VITE_ beginnen, damit sie für Ihren Client-Code verfügbar sind.

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Umgebungsvariablen auslesen

Greifen Sie in Vite über import.meta.env auf verfügbare Variablen zu.

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

Sicherheitshinweis zu Umgebungsvariablen

Alles, was für Client-Code verfügbar gemacht wird, ist im Browser sichtbar.

  • Legen Sie niemals Geheimnisse wie private API-Schlüssel in VITE_-Variablen ab
  • Hierher gehören ausschließlich öffentliche, nicht vertrauliche Konfigurationsdaten
  • Bewahren Sie echte Geheimnisse auf dem Server auf

Pfad-Aliase

Ein Alias verkürzt Importpfade. Häufig wird @ dem src-Ordner zugeordnet.

Dadurch vermeiden Sie fehleranfällige relative Pfade wie ../../components.

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

Den Alias verwenden

Nach der Konfiguration importieren Sie aus @/ statt über relative Pfade.

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

Optionen des Entwicklungsservers

In der Konfigurationsdatei können Sie außerdem den Entwicklungsserver anpassen:

  • port legt fest, an welchem Port gelauscht wird
  • open öffnet den Browser automatisch
  • proxy leitet API-Anfragen weiter, um CORS zu vermeiden
export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

Schnelltest

Testen Sie Ihr Verständnis der Vite-Konfiguration.

Zusammenfassung: Konfiguration und Plugins

Sie haben gelernt, ein Vue-Projekt zu konfigurieren:

  • vite.config.js oder vue.config.js enthalten die Einstellungen
  • Fügen Sie plugins dem plugins-Array hinzu
  • Verwenden Sie .env-Dateien mit dem Präfix VITE_
  • Lesen Sie sie über import.meta.env aus
  • Setzen Sie den @-Alias für übersichtliche Imports

Als Nächstes geht es um Template-Syntax und Datenbindung.

Häufig gestellte Fragen

Ist die Lektion „CLI-Konfiguration und Plugins“ kostenlos?

Ja — der vollständige Text von „CLI-Konfiguration und Plugins“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „CLI-Konfiguration und Plugins“?

Konfigurieren Sie die CLI und fügen Sie Plugins hinzu, um Ihr Projekt zu erweitern Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „CLI-Konfiguration und Plugins“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Vue CLI installieren
  2. Generierte Projektstruktur
  3. CLI-Konfiguration und Plugins
← Zurück zu Vue Academy