TYPESCRIPT
#vite#config#frontend#build#typescript#esm

Vite: production-ориентированный vite.config.ts (2026)

Минимальный и достаточный конфиг Vite для современного фронтенд-проекта: ESM, TypeScript, defineConfig, алиасы, build.target, sourcemap, порты dev и preview. Только официальный API, без экспериментальных опций.

Как использовать

  1. Скопировать в корень проекта как vite.config.ts
  2. Убедиться, что установлены vite и typescript (npm i -D vite typescript)
  3. При необходимости добавить плагин фреймворка (react, vue, svelte) и расширить конфиг

Конфигурация использует только официальный API Vite (vite.dev/config), без нестабильных или экспериментальных опций.

import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';

// В ESM нет __dirname; путь к директории конфига нужен для resolve.alias
const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  // --- Разрешение модулей и алиасы ---
  resolve: {
    // @/ → src/ — короткие импорты без относительных путей вглубь
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },

  // --- Dev-сервер (pnpm dev / npm run dev) ---
  server: {
    // Порт по умолчанию 5173; явно задаём для единообразия и документации
    port: 5173,
  },

  // --- Preview (pnpm preview / npm run preview) — раздача собранного dist ---
  preview: {
    // Порт по умолчанию 4173; удобно отличать от dev при одновременном запуске
    port: 4173,
  },

  // --- Production build ---
  build: {
    // Цель транспиляции: современные браузеры 2025–2026.
    // baseline-widely-available = Chrome 107+, Edge 107+, Firefox 104+, Safari 16+.
    // Явно задаём для предсказуемости и при необходимости смены (например es2022).
    target: 'baseline-widely-available',

    // Source maps в проде: 'hidden' — карты генерируются, но в бандл не добавляется
    // комментарий. Нужны для разбора ошибок в Sentry/логах; пользователь их не тянет.
    // true — отдельные .map файлы + комментарий в бандле (можно не отдавать .map с сервера).
    // false — без карт (меньше объём, сложнее отлаживать прод).
    sourcemap: 'hidden',
  },
});

Файл должен лежать в корне проекта как vite.config.ts. Для React/Vue/Svelte добавь соответствующий плагин в plugins (например @vitejs/plugin-react).

Когда такого конфига достаточно

  • SPA или MPA на React, Vue, Svelte или vanilla TS/JS.
  • Один вход (index.html), стандартные ассеты (CSS, картинки, шрифты).
  • Нет кастомного base, прокси для API настраивается при необходимости в server.proxy.
  • Деплой — статика в dist, раздача через nginx/CDN.

Когда конфиг стоит расширять

  • Плагин фреймворка — React: @vitejs/plugin-react, Vue: @vitejs/plugin-vue, и т.д.
  • Base path — если приложение не в корне домена: base: '/app/'.
  • Переменные окружения — глобальные константы через define, не секреты (те в .env).
  • Прокси в dev — запросы к бэкенду: server.proxy.
  • SVG как компоненты, Raw-импорты — плагины вроде vite-plugin-svgr.
  • Легаси-браузеры — @vitejs/plugin-legacy и сдвиг build.target при необходимости.
  • SSR — отдельная настройка build.ssr и точки входа.

Не используй вымышленные опции: все параметры есть в официальной документации Vite.

Похожие сниппеты