Сгенерированный Vite-проект формируется как минималистичная, но функционально завершённая заготовка, в которой уже заложены ключевые точки входа, конфигурация сборки и базовая структура исходного кода. Основной принцип — отсутствие избыточной архитектуры при сохранении расширяемости.
В корне проекта обычно располагаются следующие элементы:
package.jsonvite.config.js или vite.config.tsindex.htmlsrcpublic (в некоторых шаблонах).gitignore,
.env)Каждый из этих элементов выполняет строго определённую роль в экосистеме Vite.
Файл package.json в Vite-проекте выполняет роль
управляющего манифеста, где определяются:
dependencies)devDependencies)Типичный набор скриптов включает:
dev — запуск локального сервера разработкиbuild — сборка production-версииpreview — локальный просмотр собранного проектаОсобенность Vite заключается в том, что dev-режим использует нативные ES-модули, а сборка делегируется Rollup-подобному процессу, что отражается в зависимостях и конфигурации.
Файл vite.config.js является центральной точкой
настройки поведения сборщика. Он экспортирует конфигурационный объект,
поддерживающий строгую типизацию (при использовании TypeScript) и
модульную структуру.
Ключевые секции конфигурации:
Секция plugins определяет расширения
функциональности:
Плагины подключаются как функции, возвращающие объект с хуками жизненного цикла сборки.
Раздел resolve отвечает за:
Часто используется настройка алиаса @ для упрощения
доступа к src:
Секция server управляет dev-сервером:
Vite dev-сервер отличается мгновенным стартом благодаря отсутствию предварительной полной сборки проекта.
Раздел build определяет параметры production-сборки:
Vite использует Rollup как основу сборки, что обеспечивает детализированное управление бандлом.
В отличие от традиционных сборщиков, Vite использует
index.html как первичную точку входа. Это ключевое
архитектурное отличие.
Внутри файла:
<script type="module">Пример логики:
Такой подход делает HTML активной частью графа модулей, а не пассивным контейнером.
Папка src содержит весь прикладной код приложения. Она
структурируется в зависимости от выбранного шаблона (vanilla, Vue, React
и т.д.), но базовые элементы повторяются.
Файл входа JavaScript-приложения:
В React-проектах здесь создаётся корневой рендер:
createRootApp компонентВ Vue-проектах:
createAppApp.vueКорневой компонент приложения:
В шаблонных проектах этот файл часто включает минимальную демонстрационную разметку.
Каталог assets предназначен для:
Особенность Vite заключается в том, что импорт ассетов выполняется напрямую в JS/TS модулях:
При использовании Vue или React часто присутствует папка
components:
Архитектура не навязывается, но структура по умолчанию предполагает модульность.
Папка public содержит ресурсы, которые:
Типичные случаи использования:
Разница между assets и public
принципиальна:
assets — управляется сборщикомpublic — копируется как естьVite поддерживает систему переменных окружения через
.env файлы:
.env.env.development.env.productionОсобенность:
import.meta.envVITE_Пример структуры:
VITE_API_URLVITE_MODEЭта система обеспечивает изоляцию конфигураций для разных окружений без изменения кода.
Папка node_modules содержит:
Vite активно использует pre-bundling зависимостей через esbuild:
После выполнения production-сборки создаётся директория
dist:
Структура dist отражает финальный результат, готовый к
деплою на сервер или CDN.
Структура проекта в Vite формируется вокруг графа зависимостей:
index.html инициирует загрузку модулейmain.js становится корнем JS-графаЭто отличает Vite от классических сборщиков, где входной точкой является JavaScript, а HTML генерируется постфактум.
App.vue как корневой компонентcomponents, viewsmain.jsxApp.jsxhooks, pages,
components.ts и .tsx файлыtsconfig.jsonДополнительно в проекте могут присутствовать:
tsconfig.json — настройка TypeScripteslint.config.js — правила линтингаprettier.config.js — форматирование кодаЭти файлы не относятся напрямую к Vite, но интегрируются в общую разработческую цепочку.
С ростом проекта базовая структура Vite остаётся неизменной, но расширяется за счёт:
services, store,
router)Vite не навязывает архитектуру, что позволяет сохранять исходную простоту структуры даже в крупных приложениях.