Перейти к основному содержанию
iotools.cloudiotools.cloud

Генератор конфигурации Vite

Создайте файл vite.config.ts/js из предустановки фреймворка (Vanilla, React, React SWC, Vue, Svelte, Solid), опциональных плагинов (SVGR, tsconfig-paths, PWA, сжатие, визуализатор бандла), конструктора путей псевдонимов, редактора правил прокси сервера разработки и опций сборки — скачайте или скопируйте, готово к использованию.

Ввод

Выбирает плагин фреймворка и его рекомендуемые импорты.

Только изменяет имя файла/комментарий заголовка — тело конфигурации валидно так или иначе.

Плагины

Псевдонимы путей

По одному в строке как alias=path, например @=./src. Оставьте пусто для отсутствия.

Сервер разработки

Собственный стандарт Vite — 5173 — выдается только при изменении.

По одному в строке как path=target, например /api=http://localhost:3000. Оставьте пусто для отсутствия.

Сборка

Опции вывода

Вывод

Созданная конфигурация
Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/vite-config-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "framework": "reactSwc",
    "useTypescript": "true",
    "pluginSvgr": "true",
    "pluginTsconfigPaths": "",
    "pluginPwa": "",
    "pluginCompression": "",
    "pluginVisualizer": "",
    "aliases": "@=./src",
    "serverPort": "3000",
    "serverOpen": "true",
    "serverHost": "",
    "proxyRules": "/api=http://localhost:8080",
    "buildTarget": "esnext",
    "outDir": "dist",
    "sourcemap": "",
    "includeComments": "true",
    "includeHeader": "true",
    "includeInstall": "true"
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `vite-config-generator` tool (Vite Config Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/vite-config-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор конфигурации Vite — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCPОт 5 кредитов
Нужно больше кредитов?Посмотреть тарифы

Также доступно через

ИнтеграцииРасширение для браузераРасширение для VS Code

Руководства

Генератор конфигурации Vite создает готовый к использованию vite.config.ts (или .js) из нескольких выпадающих меню и переключателей — не нужно запоминать имена импорта плагинов, шаблон псевдонима fileURLToPath/import.meta.url или форму правила прокси. Выберите свой фреймворк, настройте несколько плагинов и псевдонимов, и скопируйте сгенерированный файл прямо в свой проект.

Что он делает

Конфигурации Vite выглядят просто, пока вам не понадобятся псевдонимы путей, прокси сервера разработки или более одного плагина — затем вы жонглируете импортами, объектом resolve.alias и записями server.proxy вручную. Этот инструмент собирает все это для вас. Он поддерживает:

  • Предустановки фреймворка — Vanilla, React (@vitejs/plugin-react), React с SWC (@vitejs/plugin-react-swc), Vue 3, Svelte и Solid, каждый с соответствующим импортом плагина и командой установки.
  • Плагины функций — SVGR (импортировать SVG как компоненты React), vite-tsconfig-paths, vite-plugin-pwa, сжатие gzip/Brotli и визуализатор размера бандла, каждый независимый переключатель.
  • Конструктор псевдонима пути — одна строка alias=path на псевдоним, отрисовывается как безопасный для ESM шаблон fileURLToPath(new URL('./path', import.meta.url)) (работает из любого файла, в отличие от __dirname).
  • Редактор прокси сервера разработки — одна строка path=target на правило, отрисовывается как запись server.proxy с changeOrigin: true.
  • Опции сборки — целевая версия, директория вывода и карты источников.
  • TypeScript vs. JavaScript — переключает имя файла/комментарий заголовка; тело, которое создается, валидно так или иначе.

Только разделы, которые вы действительно изменили из собственных стандартов Vite, появляются в выводе — нет строки port: 5173, повторяющей стандарт, нет пустого блока build — поэтому файл выглядит как что-то, написанное человеком, а не дамп шаблона.

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

  1. Выберите ваш фреймворк.
  2. Включите любые плагины, которые вам нужны (SVGR появляется только для предустановок React).
  3. Добавьте псевдонимы путей, по одному в строке как alias=path (например @=./src).
  4. Установите пользовательский порт сервера разработки, включите open/host и добавьте правила прокси, если они вам нужны.
  5. Настройте опции сборки, если ваша целевая версия или директория вывода не являются стандартом Vite.
  6. Скопируйте созданную конфигурацию или загрузите ее, затем выполните команду установки, которую она показывает.

Вывод обновляется мгновенно при изменении любой опции.

Нужно ли мне все еще устанавливать пакеты?

Да. Инструмент создает текст конфигурации и соответствующую команду установки, но не устанавливает ничего для вас. Запустите строку npm install -D …, которую она создает (или эквивалент yarn/pnpm), чтобы Vite мог разрешить ссылаемые плагины.

Почему мой псевдоним использует fileURLToPath(new URL(...)) вместо path.resolve(__dirname, ...)?

vite.config.ts выполняется как модуль ES, где __dirname недоступен без дополнительной настройки. Шаблон fileURLToPath(new URL('./src', import.meta.url)) — это безопасный для ESM эквивалент, который используют собственные шаблоны Vite, и он работает одинаково независимо от того, является ли конфигурация TypeScript или JavaScript.

Могу ли я отточить конфигурацию позже?

Конечно. Созданный файл — это обычная отправная точка — добавьте больше плагинов, расширьте объекты resolve.alias/server.proxy или добавьте опции, которые не охватывает этот генератор. Рассматривайте вывод как твердую базовую линию, а не заблокированный результат.

Похожие инструменты

Конфиденциальность

Этот генератор работает полностью в вашем браузере. Ваши выборы никогда не загружаются, не записываются и не сохраняются — конфигурация собирается локально из выбранных вами опций, и ничто не покидает ваше устройство.

vitevite.configbundlerbuild toolreactvuesveltesoliddeveloper tools

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу