Хостинг Vite: деплой dist/ одной командой

Q: Можно использовать переменные окружения Vite?

Да, те, что начинаются с VITE_: они записываются в сборку при её запуске. После изменения пересоберите проект. Всё секретное должно жить на сервере, а не в приложении на Vite.

Q: Нужен ли многостраничному сайту на Vite одностраничный режим?

Нет. Каждая HTML-страница — отдельный файл, и about.html открывается по /about. Оставьте одностраничный режим выключенным, чтобы при опечатке в адресе отдавался ваш 404.html.

Vite собирает проекты на React, Vue, Svelte, Solid и чистом JavaScript в папку статических файлов dist/. Lobsite размещает эту папку. Выполните npm run build, затем npx lobsite, и приложение заработает по адресу *.lobsite.app с HTTPS. Если в приложении есть клиентская маршрутизация, одна настройка заставит глубокие ссылки работать.

Делаете браузерную игру с помощью шаблона Vite? Руководство по хостингу Phaser охватывает игровые ресурсы, размер холста и сборки игрового тестирования наряду с этим рабочим процессом развертывания.

Как это работает

Соберите командой npm run build (то есть vite build). Приложение окажется в dist/, файлы с хешами — в dist/assets/.
Выполните npx lobsite в проекте. Деплоится dist/, а не public/, который Vite уже скопировал в сборку. Первый деплой не требует аккаунта и живёт 6 часов.
Включите одностраничный режим, если в приложении есть роутер: добавьте spa = true в lobsite.toml или включите Одностраничное приложение в настройках сайта. Затем сохраните сайт по ссылке для получения в бесплатном аккаунте.

Маршрутизация и одностраничный режим

У приложения на Vite с React Router, Vue Router или TanStack Router один index.html. Если открыть /settings напрямую, браузер запросит у сервера несуществующий файл. В одностраничном режиме Lobsite отвечает на такие пути вашим index.html, а страницу рисует роутер:

# lobsite.toml
spa = true

Приложение получают только запросы страниц. Отсутствующий файл, например старый /assets/index-3f9a.js, получает настоящий 404, так что посетитель, у которого после деплоя ещё открыта прежняя версия, увидит понятную ошибку, а не HTML вместо скрипта. Деплой выводит подсказку, если в package.json есть роутер, а одностраничный режим выключен. Подробнее — в документации.

vite.config и сборка

base оставьте по умолчанию, /: приложение отдаётся из корня адреса. Меняйте его только для проектного сайта на GitHub Pages и уберите при переезде.
Переменные окружения, начинающиеся с VITE_, записываются в сборку. Их увидит любой, кто откроет приложение, поэтому не храните в них секреты; сами файлы .env никогда не деплоятся.
Несколько страниц (build.rollupOptions.input с несколькими HTML-файлами) — это многостраничный сайт: каждая страница — отдельный файл, и одностраничный режим не нужен.
npm run preview отдаёт dist/ локально — это самая быстрая проверка перед деплоем.

Кеширование файлов с хешами

Vite добавляет в имя файла хеш его содержимого, например index-3f9a.js, поэтому файл с конкретным именем никогда не меняется. Lobsite тоже хранит файлы по содержимому, так что деплой загружает только изменившиеся чанки. Чтобы браузеры хранили такие файлы год, добавьте правило для заголовков:

[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"

index.html всегда проверяется заново, поэтому посетители получают новую версию сразу после деплоя.

Одностраничные приложения

spa = true в lobsite.toml или один переключатель в панели: глубокие ссылки открывают приложение, отсутствующие файлы по-прежнему дают 404.

Загружаются только изменённые файлы

Файлы хранятся по хешу. Повторный деплой неизменённого сайта загружает 0 байт.

У каждого деплоя свой URL

Предпросмотр до публикации. Откат в один клик — вместе с перенаправлениями.

HTTPS везде

Каждый сайт получает адрес *.lobsite.app с HTTPS с первого деплоя.

Конфигурация в одном файле

Перенаправления, заголовки и формы хранятся в lobsite.toml и переезжают с каждым деплоем.

Попробовать без аккаунта

Деплой без аккаунта работает 6 часов. Ссылка для получения сохранит его бесплатно.

Сравнение хостингов для Vite

	Lobsite	Netlify	Vercel	GitHub Pages
Глубокие ссылки в одностраничном приложении	`spa = true` или переключатель в панели	Правило `_redirects`	Rewrite в `vercel.json`	Нет: скопировать `index.html` в `404.html`, отдаётся со статусом 404
Отсутствующие файлы скриптов	404	`index.html` приложения	`index.html` приложения	404
Сборка на сервере	Нет: вы деплоите `dist/`	Да	Да	В GitHub Actions
Аккаунт до первого деплоя	Нет: 6 часов онлайн, затем сохраните бесплатно	Да	Да	Да, и репозиторий
Свой домен	Да, бесплатно	Да	Да	Да

Netlify и Vercel собирают проекты из Git и запускают серверные функции. Lobsite — самый быстрый способ опубликовать собранное приложение на Vite с вашего компьютера, из CI или ИИ-агента, а одностраничная маршрутизация включается одной строкой или одним кликом.

Частые вопросы

Почему страницы моего приложения на Vite, кроме главной, показывают «Not found»?

Приложение использует клиентскую маршрутизацию, а у сервера нет файлов для этих путей. Включите одностраничный режим: spa = true в lobsite.toml или Одностраничное приложение в настройках сайта.

Lobsite запускает мою сборку Vite?

Нет. Соберите проект на своём компьютере или в CI, затем задеплойте dist/. Онлайн попадёт ровно то, что вы проверили через npm run preview.

Можно использовать переменные окружения Vite?

Да, те, что начинаются с VITE_: они записываются в сборку при её запуске. После изменения пересоберите проект. Всё секретное должно жить на сервере, а не в приложении на Vite.

Нужен ли многостраничному сайту на Vite одностраничный режим?

Нет. Каждая HTML-страница — отдельный файл, и about.html открывается по /about. Оставьте одностраничный режим выключенным, чтобы при опечатке в адресе отдавался ваш 404.html.