Generator vite.config.js

Generator konfiguracji Vite

Vite to nowoczesne narzędzie do budowania frontendu — błyskawiczny serwer deweloperski i szybki build produkcyjny. Zastąpił Webpacka m.in. w Laravelu.

Obsługiwane projekty

Najważniejsze opcje

• server.port — port serwera deweloperskiego (domyślnie 5173).
• server.https — włącza HTTPS lokalnie.
• resolve.alias — skróty importów, np. @.
• build.outDir — katalog wynikowy buildu.

Przykład

Dla Laravela wtyczka przyjmuje listę wejść (resources/css/app.css, resources/js/app.js) i włącza odświeżanie przeglądarki (refresh: true) przy zmianach w szablonach.

Jak działa generator konfiguracji Vite

Narzędzie nie uruchamia Vite i nie zagląda do Twojego repozytorium. Działa jak formularz, który zamienia kilka decyzji na gotowy plik tekstowy. Każde pole formularza odpowiada jednemu fragmentowi obiektu przekazywanego do funkcji defineConfig. Wybór projektu decyduje o tym, jakie wtyczki zostaną zaimportowane, a pozostałe opcje trafiają do pliku tylko wtedy, gdy ustawisz je świadomie.

Mechanizm sprowadza się do trzech kroków: odczyt wartości z formularza, zbudowanie obiektu konfiguracji i zapisanie go w składni modułów ES. Vite przy starcie wczytuje plik vite.config.js, wykonuje go w środowisku Node i otrzymuje zwykły obiekt JavaScript. Ten obiekt jest scalany z konfiguracją wbudowaną w Vite — wartości z pliku mają pierwszeństwo, a pola, których nie podałeś, pozostają domyślne. Dlatego wpisanie samego portu nie kasuje pozostałych ustawień serwera ani builda.

Warto wiedzieć, że defineConfig niczego nie przelicza — zwraca dokładnie ten sam obiekt, który do niego przekażesz, ale dzięki niemu edytor podpowiada nazwy pól i typy. Plik jest modułem, więc import wtyczek i eksport konfiguracji muszą używać tej samej składni. Generator pilnuje przyporządkowania: aliasy lądują w sekcji resolve, katalog wynikowy w build, a parametry serwera w server. Po wygenerowaniu plik możesz swobodnie edytować i dopisywać kolejne sekcje.

Przykład krok po kroku: projekt React na porcie 8080

1. Wybierz projekt React. Do pliku trafia import @vitejs/plugin-react oraz jedno wywołanie react() w tablicy plugins, czyli łącznie jedna wtyczka.
2. W polu port wpisz 8080. W sekcji server pojawi się wpis port: 8080, który nadpisze wartość domyślną.
3. Zostaw HTTPS wyłączone. Pole https nie zostanie zapisane, więc serwer użyje ustawienia domyślnego — w formularzu zmieniasz cztery wartości, ale do pliku trafią tylko trzy z nich.
4. Dodaj alias @ wskazujący na katalog /src. W resolve.alias powstanie mapa z jednym wpisem: '@' na '/src'.
5. Ustaw katalog wynikowy na dist. Sekcja build otrzyma outDir: 'dist'.
6. Skopiuj wygenerowany plik do katalogu głównego projektu i uruchom npm run dev. Serwer wystartuje pod adresem http://localhost:8080, bo port z konfiguracji zastępuje ten domyślny.

Opcje formularza i ich miejsce w pliku

Praktyczne wskazówki

• Trzymaj konfigurację w jednym pliku — rozbijanie ustawień na kilka modułów utrudnia diagnozę; jeśli projekt rośnie, wydzielaj funkcje pomocnicze, ale sam eksport zostawiaj w vite.config.js.
• Port ustawiaj świadomie — sztywny numer bywa wygodny lokalnie, w zespole częściej sprawdza się pozostawienie wartości domyślnej; gdy zależy Ci na konkretnym numerze, pamiętaj, że zajęty port może przesunąć start serwera na kolejny wolny.
• Aliasy uzgadniaj z edytorem — Vite czyta resolve.alias, a edytor osobny plik jsconfig.json lub tsconfig.json; bez obu wpisów importy się skompilują, ale podpowiedzi w edytorze mogą nie działać.
• Katalog wynikowy dopasuj do wdrożenia — outDir musi wskazywać tam, skąd serwer produkcyjny naprawdę serwuje pliki statyczne; zmiana nazwy bez zmiany konfiguracji hostingu kończy się pustą stroną.
• Traktuj wynik jako punkt startowy — opcje takie jak proxy, base czy define dopisujesz ręcznie, bo formularz ich nie obejmuje.

Czego narzędzie nie uwzględnia

• Nie analizuje projektu — generator nie sprawdza, czy podane ścieżki istnieją ani czy struktura katalogów odpowiada wybranemu frameworkowi.
• Nie instaluje zależności — plik może importować wtyczkę, której nie ma w package.json; bez doinstalowania właściwego pakietu build zakończy się błędem.
• Nie obejmuje wszystkich opcji Vite — proxy, base, define, zmienne środowiskowe, konfiguracja Rollupa i optymalizacja zależności wymagają ręcznej edycji.
• Nie weryfikuje zgodności wersji — narzędzie wygeneruje poprawny składniowo tekst niezależnie od tego, czy wtyczka pasuje do wersji Vite w projekcie.

Najczęstsze pytania