3. Конфигурация vite.config.ts

Конфигурационный файл Vite — vite.config.ts — это точка входа для всех настроек сборщика. Он экспортирует объект конфигурации, обёрнутый в хелпер defineConfig для TypeScript-автодополнения.

Базовая структура

vite.config.ts

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

export default defineConfig({
  // Плагины
  plugins: [react()],

  // Разрешение модулей
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
    },
  },

  // Настройки dev сервера
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },

  // Настройки production сборки
  build: {
    outDir: 'dist',
    sourcemap: true,
    target: 'es2015',
  },

  // Базовый URL (для деплоя на поддиректорию)
  base: '/',
})

defineConfig — Зачем нужен?

// Без defineConfig — работает, но нет TypeScript-типов
export default {
  plugins: [react()],
  // ❌ нет автодополнения, нет проверки типов
}

// С defineConfig — полная TypeScript поддержка
export default defineConfig({
  plugins: [react()],
  // ✓ IntelliSense, автодополнение, проверка типов
})

resolve.alias — Упрощение импортов

vite.config.ts

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

// tsconfig.json — нужно добавить и сюда!
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

// Теперь вместо:
import Button from '../../../components/Button'

// Можно писать:
import Button from '@/components/Button'

build опции

build: {
  outDir: 'dist',          // Директория вывода
  assetsDir: 'assets',     // Поддиректория для ресурсов
  sourcemap: true,         // Генерировать source maps
  minify: 'esbuild',       // 'esbuild' | 'terser' | false
  target: 'es2015',        // Target браузеры/версии

  // Rollup опции
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
        utils: ['lodash', 'date-fns'],
      },
    },
  },

  // Лимит для inline (base64) ресурсов
  assetsInlineLimit: 4096, // 4kb

  // Разбивка CSS в отдельные файлы
  cssCodeSplit: true,
}

base URL

// Для деплоя на GitHub Pages (например /my-repo/)
base: '/my-repo/',

// Для деплоя в корень
base: '/',

// Из переменной окружения
base: process.env.NODE_ENV === 'production' ? '/app/' : '/',

Conditional Config с mode

export default defineConfig(({ command, mode }) => {
  // command: 'serve' (dev) | 'build' (prod)
  // mode: 'development' | 'production' | custom

  return {
    plugins: [
      react(),
      ...(mode === 'development' ? [devPlugin()] : []),
    ],
    build: {
      sourcemap: command === 'serve',
    },
  }
})

Ниже — интерактивный конструктор конфигурации: включайте опции и получайте готовый vite.config.ts: