Vue Academy · Lekcja

Konfiguracja CLI i wtyczki

Skonfigurują Państwo CLI i dodadzą wtyczki rozszerzające projekt.

Konfiguracja CLI i wtyczki to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.

Konfigurowanie kompilacji

Zarówno Vue CLI, jak i Vite pozwalają dostosować kompilację za pomocą pliku konfiguracyjnego.

Vue CLI korzysta z vue.config.js
Vite korzysta z vite.config.js

W tym miejscu można dodawać wtyczki, ustawiać aliasy, konfigurować serwer deweloperski i robić wiele więcej.

Podstawy vite.config.js

Typowy plik vite.config.js importuje wtyczkę Vue i eksportuje obiekt konfiguracji.

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

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

Podstawy vue.config.js

W projektach Vue CLI plik vue.config.js eksportuje konfigurację w ten sam sposób.

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

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

Dodawanie wtyczek

Wtyczki rozszerzają możliwości kompilacji.

Należy instalować je za pomocą npm
Należy importować je w pliku konfiguracyjnym
Należy dodawać je do tablicy plugins

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

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

Zmienne środowiskowe

Konfigurację zmieniającą się między środowiskami należy przechowywać w plikach .env.

.env jest ładowany wszędzie
.env.development służy tylko do programowania
.env.production służy do kompilacji produkcyjnych

Definiowanie zmiennych środowiskowych

W Vite zmienne muszą mieć prefiks VITE_, aby były udostępniane kodowi klienckiemu.

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

Odczytywanie zmiennych środowiskowych

Udostępnione zmienne są dostępne w Vite za pośrednictwem import.meta.env.

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

Uwaga dotycząca bezpieczeństwa zmiennych środowiskowych

Wszystko, co zostanie udostępnione kodowi klienckiemu, jest widoczne w przeglądarce.

Nigdy nie należy umieszczać sekretów, takich jak prywatne klucze API, w zmiennych VITE_
W tym miejscu powinna znajdować się wyłącznie publiczna, niewrażliwa konfiguracja
Prawdziwe sekrety należy przechowywać na serwerze

Aliasy ścieżek

Alias skraca ścieżki importu. Najczęściej mapuje @ na folder src.

Eliminuje to podatne na błędy ścieżki względne, takie jak ../../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))
    }
  }
})

Używanie aliasu

Po skonfigurowaniu aliasu należy importować za pomocą @/ zamiast ścieżek względnych.

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

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

Opcje serwera deweloperskiego

Plik konfiguracyjny pozwala również dostosować serwer deweloperski:

port określa port, na którym serwer nasłuchuje
open automatycznie otwiera przeglądarkę
proxy przekazuje żądania API, aby uniknąć CORS

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat konfiguracji Vite.

Podsumowanie: konfiguracja i wtyczki

Nauczyli się Państwo konfigurować projekt Vue:

Ustawienia znajdują się w vite.config.js lub vue.config.js
Należy dodawać plugins do tablicy plugins
Należy używać plików .env z prefiksem VITE_
Można odczytywać je za pomocą import.meta.env
Należy ustawić alias @, aby uprościć importy

Następnie: poznają Państwo składnię szablonów i wiązanie danych.

Często zadawane pytania

Czy lekcja „Konfiguracja CLI i wtyczki” jest bezpłatna?

Tak — pełny tekst „Konfiguracja CLI i wtyczki” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Konfiguracja CLI i wtyczki”?

Skonfigurują Państwo CLI i dodadzą wtyczki rozszerzające projekt. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.

Ile czasu zajmuje lekcja „Konfiguracja CLI i wtyczki”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy