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 байтів.
Перегляньте перед публікацією. Відкотіть одним натисканням разом із перенаправленнями.
Кожен сайт отримує адресу *.lobsite.app із HTTPS від першого розгортання.
Перенаправлення, заголовки та форми зберігаються в lobsite.toml і супроводжують кожне розгортання.
Сайт без облікового запису працює 6 годин. Посилання для збереження дозволяє залишити його безкоштовно.
Порівняння хостингів Vite
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Прямі посилання односторінкового застосунку | spa = true або перемикач у панелі керування |
Правило _redirects |
Перезапис у vercel.json |
Ні: копія index.html як 404.html, що віддається зі статусом 404 |
| Відсутні файли скриптів | 404 | index.html застосунку |
index.html застосунку |
404 |
| Збірка на сервері | Ні: ви розгортаєте dist/ |
Так | Так | У GitHub Actions |
| Обліковий запис перед першим розгортанням | Ні: працює 6 годин, потім можна зберегти безкоштовно | Так | Так | Так, і репозиторій |
| Власний домен | Так, безкоштовно | Так | Так | Так |
Netlify й Vercel збирають із Git і запускають серверні функції. Lobsite — найшвидший спосіб опублікувати зібраний застосунок Vite з вашого комп’ютера, CI чи через AI-агента з односторінковою маршрутизацією за один рядок або натискання.
Поширені запитання
Чому всі сторінки Vite, крім головної, показують «Не знайдено»?
Застосунок використовує клієнтську маршрутизацію, а сервер не має файлів для цих шляхів. Увімкніть односторінковий режим: spa = true у lobsite.toml або Односторінковий застосунок у налаштуваннях сайту.
Чи виконує Lobsite мою збірку Vite?
Ні. Зберіть на комп’ютері чи в CI, потім розгорніть dist/. Опублікується саме те, що ви перевірили через npm run preview.
Чи можна використовувати змінні середовища Vite?
Так, ті, що починаються з VITE_: вони записуються в збірку під час виконання. Після їх зміни зберіть знову. Усе секретне має бути на сервері, а не в застосунку Vite.
Чи потрібен багатосторінковому сайту Vite односторінковий режим?
Ні. Кожна HTML-сторінка — окремий файл, а about.html відкривається за /about. Залиште односторінковий режим вимкненим, щоб помилкова адреса отримувала вашу 404.html.