Migracja z Vue CLI do Vite – jak to zrobić krok po kroku

Autorka: Magda

Wprowadzenie

Vite staje się domyślnym wyborem dla wielu nowych projektów Vue. Jego wydajność, prostota konfiguracji i zgodność z nowoczesnym ekosystemem JavaScript sprawiają, że coraz więcej programistów decyduje się na migrację z Vue CLI. W tym poradniku przedstawiam proces migracji krok po kroku — w sposób przejrzysty i zwięzły.

Dlaczego warto przejść na Vite?

Vue CLI to dojrzałe rozwiązanie, jednak korzysta z Webpacka, który może być wolniejszy przy większych projektach. Z kolei Vite działa w oparciu o natywny ESM i Rollupa, oferując m.in.:

  • szybsze uruchamianie dev servera,
  • natychmiastowy hot reload,
  • prostszy system konfiguracji,
  • mniejsze paczki produkcyjne.

Etapy migracji

1. Usuń zależności powiązane z Vue CLI

Najpierw należy odinstalować stare zależności i usunąć pliki lock:

rm -rf node_modules
rm package-lock.json # lub yarn.lock
npm uninstall @vue/cli-service

2. Zainstaluj Vite i niezbędne pluginy

npm install --save-dev vite @vitejs/plugin-vue
npm install vue

Jeśli projekt korzysta z TypeScript:

npm install --save-dev @vue/tsconfig

3. Utwórz plik konfiguracyjny vite.config.js

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

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

Jeśli korzystasz z aliasów, możesz dodać:

import path from 'path'

resolve: {
  alias: {
    '@': path.resolve(__dirname, './src'),
  }
}

4. Zaktualizuj index.html

Vite wymaga jawnego odwołania do pliku main.js w index.html:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <title>Moja Aplikacja</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

5. Zmodyfikuj main.js

Przykładowy main.js (lub main.ts):

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

6. Uruchom projekt

npx vite

Powinieneś zobaczyć działającą aplikację z błyskawicznym ładowaniem i odświeżaniem zmian.

Uwagi dodatkowe

  • CSS i zmienne środowiskowe: Vite obsługuje pliki .env w prosty sposób (import.meta.env zamiast process.env). Może być konieczna ich migracja.
  • Obsługa pluginów i komponentów globalnych: sprawdź, czy wszystkie używane biblioteki wspierają Vite. W razie potrzeby użyj zamienników.
  • Build produkcyjny: vite build tworzy zoptymalizowaną wersję strony w folderze dist.

Podsumowanie

Migracja z Vue CLI do Vite nie jest trudna i może przynieść wymierne korzyści już na etapie developmentu. Jeśli tworzysz nowy projekt lub utrzymujesz starszy, warto rozważyć ten krok, by poprawić szybkość działania i uprościć konfigurację.