Настройка Vite для разработки

Vite — современный сборщик проектов, обеспечивающий быструю разработку и мгновенную перезагрузку модулей благодаря использованию нативных ES-модулей в браузере. При работе с Vue.js Vite предоставляет оптимизированную интеграцию, включая поддержку Vue Single File Components (SFC), горячую замену модулей (HMR) и возможности для сборки на продакшн.

Установка проекта

Для начала необходимо создать новый проект с использованием Vite и шаблона Vue. Самый простой способ — через пакетный менеджер npm или Yarn:

npm create vite@latest my-vue-app
# или
yarn create vite my-vue-app

При выборе шаблона нужно указать Vue (или Vue + TypeScript при необходимости). После создания проекта выполняется установка зависимостей:

cd my-vue-app
npm install

Структура проекта

После создания проекта структура выглядит следующим образом:

my-vue-app/
├─ index.html
├─ package.json
├─ vite.config.js
├─ public/
├─ src/
│  ├─ main.js
│  ├─ App.vue
│  └─ components/
└─ node_modules/
  • index.html — точка входа приложения.
  • vite.config.js — конфигурационный файл Vite.
  • src/ — основной код приложения.
  • public/ — статические файлы, которые не обрабатываются сборщиком.

Конфигурация Vite

Файл vite.config.js отвечает за настройку сборки и плагинов. Для интеграции Vue необходимо подключить официальный плагин:

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true,
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

Ключевые моменты конфигурации:

  • plugins: [vue()] — подключение поддержки SFC.
  • server.port — порт для локального сервера разработки.
  • server.open — автоматическое открытие браузера при запуске.
  • resolve.alias — сокращения путей для удобства импорта модулей.

Горячая перезагрузка модулей (HMR)

Одним из главных преимуществ Vite является мгновенная перезагрузка модулей. Для Vue.js это особенно полезно, так как изменения в .vue файлах отражаются в браузере без полной перезагрузки страницы, сохраняя состояние компонентов.

HMR включен по умолчанию, но его поведение можно настраивать через объект server.hmr:

server: {
  hmr: {
    overlay: true, // показывает ошибки на экране
  }
}

Поддержка TypeScript

Если проект создается с TypeScript, Vite автоматически подключает поддержку .ts и .vue файлов с типизацией. В конфигурации можно добавить строгие проверки типов:

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

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

Опция reactivityTransform позволяет использовать улучшенные реактивные синтаксисы без ref.

Оптимизация зависимостей

Vite оптимизирует зависимости при старте проекта, используя esbuild. Для сложных библиотек можно явно указать их предобработку:

optimizeDeps: {
  include: ['lodash-es'],
  exclude: ['some-large-lib']
}
  • include — список пакетов, которые необходимо предварительно собрать.
  • exclude — пакеты, которые не нужно оптимизировать.

Работа с абсолютными путями

Использование алиасов ускоряет разработку и делает импорт компонентов более удобным:

import MyComponent from '@/components/MyComponent.vue'

Алиас @ указывает на папку src, что предотвращает длинные относительные пути типа ../. ./. ./.

Интеграция CSS и препроцессоров

Vite поддерживает CSS, SCSS, Less и PostCSS. Для SCSS достаточно установить пакет:

npm install -D sass

Импорт в .vue файле:

<style lang="scss">
$primary-color: #42b983;

.button {
  background-color: $primary-color;
}
</style>

Также можно настроить глобальные переменные и миксины через vite.config.js:

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/styles/variables.scss";`
    }
  }
}

Настройка прокси для API

Для разработки с удалённым бэкендом полезно настроить прокси:

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:5000',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

Это позволяет отправлять запросы на /api/users к локальному серверу без проблем с CORS.

Сборка для продакшн

Команда сборки npm run build генерирует оптимизированные файлы в папке dist. Vite автоматически минифицирует код, разделяет чанки и использует tree-shaking. Конфигурация сборки может включать:

build: {
  outDir: 'dist',
  sourcemap: true,
  rollupOptions: {
    output: {
      manualChunks: {
        vue: ['vue', 'vue-router']
      }
    }
  }
}
  • outDir — папка для сборки.
  • sourcemap — генерация исходных карт для отладки.
  • manualChunks — разбиение библиотек на отдельные чанки для кэширования.

Настройка Vite для Vue.js обеспечивает гибкую и быструю разработку, сокращая время запуска приложения и упрощая интеграцию современных инструментов фронтенда. В сочетании с Single File Components, HMR и расширенной конфигурацией сборки, Vite создаёт эффективную среду для построения производительных Vue-приложений.

Оглавление