Хостинг Vue: Vite, Vue Router у режимі history

Q: Чи можна розгорнути сайт Nuxt на Lobsite?

Так, згенерований: виконайте npx nuxi generate, потім npx lobsite .output/public. Сторінки, що потребують сервера Nuxt, наприклад серверні маршрути, не працюватимуть.

Q: Як показати екран «сторінку не знайдено» в застосунку Vue?

Додайте універсальний маршрут у кінець списку: { path: "/:pathMatch(.)", component: NotFound }. З увімкненим односторінковим режимом кожен невідомий шлях сторінки доходить до застосунку, тому роутер вирішує, що показати.

Застосунок Vue, створений через npm create vue@latest, збирається Vite в dist/: один index.html і JavaScript, що малює кожну сторінку. Lobsite розміщує цю папку. Виконайте npm run build, потім npx lobsite — і застосунок доступний за адресою *.lobsite.app з HTTPS. Режим історії Vue Router працює після ввімкнення односторінкового режиму.

Як це працює

Зберіть застосунок командою npm run build. Vite запише його в dist/.
Виконайте npx lobsite у проєкті. Команда розгортає dist/, а не public/, яку Vite копіює в збірку. Перше розгортання не потребує облікового запису й діє 6 годин.
Увімкніть односторінковий режим для Vue Router: spa = true у lobsite.toml або Односторінковий застосунок у налаштуваннях сайту. Збережіть сайт за посиланням для збереження в безкоштовному обліковому записі.

Режим історії Vue Router

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes,
});

createWebHistory() дає чисті адреси, як-от /projects/7. Пряме відкриття запитує в сервера файл, якого немає; односторінковий режим відповідає вашим index.html, а Vue Router показує потрібний вигляд.
createWebHashHistory() (адреси на кшталт /#/projects/7) працює без односторінкового режиму, бо сервер бачить лише /. Чисті адреси кращі для поширення та пошукових систем.
Універсальний маршрут (path: "/:pathMatch(.*)*") — місце для власного екрана «сторінку не знайдено», бо з односторінковим режимом кожен невідомий шлях сторінки доходить до застосунку.

Nuxt і Vue CLI

Nuxt збирає статичний сайт командою npx nuxi generate у .output/public/. Ця папка не визначається автоматично, тому вкажіть її один раз, npx lobsite .output/public, і вона збережеться в lobsite.toml. Кожна сторінка генерується як окремий файл, тож односторінковий режим потрібен лише для маршрутів, які Nuxt не згенерував. Серверні маршрути й серверний рендеринг Nuxt потребують хостингу з Node.
Vue CLI (@vue/cli-service) перебуває в режимі підтримки, а нові проєкти використовують Vite. Наявний проєкт Vue CLI збирається в dist/, яка розгортається так само.

Односторінкові застосунки

spa = true у lobsite.toml або один перемикач у панелі керування: прямі посилання відкривають застосунок, а відсутні файли повертають 404.

Завантажуються лише змінені файли

Файли зберігаються за хешем. Повторне розгортання незміненого сайту завантажує 0 байтів.

Кожне розгортання має власну URL-адресу

Перегляньте перед публікацією. Відкотіть одним натисканням разом із перенаправленнями.

HTTPS скрізь

Кожен сайт отримує адресу *.lobsite.app із HTTPS від першого розгортання.

Форми, які просто працюють

Спрямуйте форму на /_lobsite/forms/contact. Фільтрація спаму включена.

Спробуйте без облікового запису

Сайт без облікового запису працює 6 годин. Посилання для збереження дозволяє залишити його безкоштовно.

Порівняння хостингів Vue

	Lobsite	Netlify	Vercel	GitHub Pages
Режим історії Vue Router	`spa = true` або перемикач у панелі керування	Правило `_redirects`	Перезапис у `vercel.json`	Ні: режим хешу або `404.html` зі статусом 404
Відсутні файли скриптів після розгортання	404, зрозуміла помилка	`index.html` застосунку	`index.html` застосунку	404
Серверний рендеринг Nuxt	Ні	Так	Так	Ні
Обліковий запис перед першим розгортанням	Ні: працює 6 годин, потім можна зберегти безкоштовно	Так	Так	Так, і репозиторій
Форми без бекенду	Так, після додавання сайту до облікового запису	Так	Ні	Ні
Власний домен	Так, безкоштовно	Так	Так	Так

Для застосунку Vue, що працює в браузері, Lobsite — одна команда від dist/ до робочої адреси, з режимом історії за одне налаштування та URL перегляду для кожного розгортання.

Поширені запитання

Чому сторінки Vue Router показують «Не знайдено» після перезавантаження?

Адреси режиму історії існують лише всередині застосунку. Увімкніть односторінковий режим: spa = true у lobsite.toml або Односторінковий застосунок у налаштуваннях сайту, щоб ці шляхи відкривали ваш index.html.

Що використовувати застосунку Vue на Lobsite: режим хешу чи історії?

Режим історії з увімкненим односторінковим режимом. Адреси чистіші, а пошукові системи вважають їх окремими сторінками. Режим хешу доцільний лише там, де не можна змінити налаштування сервера.

Чи можна розгорнути сайт Nuxt на Lobsite?

Так, згенерований: виконайте npx nuxi generate, потім npx lobsite .output/public. Сторінки, що потребують сервера Nuxt, наприклад серверні маршрути, не працюватимуть.

Як показати екран «сторінку не знайдено» в застосунку Vue?

Додайте універсальний маршрут у кінець списку: { path: "/:pathMatch(.*)*", component: NotFound }. З увімкненим односторінковим режимом кожен невідомий шлях сторінки доходить до застосунку, тому роутер вирішує, що показати.

Хостинг Vue-застосунків