Vue-приложение, созданное через npm create vue@latest, Vite собирает в dist/: один index.html и JavaScript, который рисует каждую страницу. Lobsite размещает эту папку. Выполните npm run build, затем npx lobsite, и приложение заработает по адресу *.lobsite.app с HTTPS. Режим history в Vue Router работает, как только включён одностраничный режим.
Как это работает
- Соберите приложение командой
npm run build. Vite запишет его вdist/. - Выполните
npx lobsiteв проекте. Деплоитсяdist/, а неpublic/, который Vite копирует в сборку. Первый деплой не требует аккаунта и живёт 6 часов. - Включите одностраничный режим для Vue Router:
spa = trueвlobsite.tomlили Одностраничное приложение в настройках сайта. Сохраните сайт по ссылке для получения в бесплатном аккаунте.
Режим history в 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 байт.
Предпросмотр до публикации. Откат в один клик — вместе с перенаправлениями.
Каждый сайт получает адрес *.lobsite.app с HTTPS с первого деплоя.
Направьте форму на /_lobsite/forms/contact. Фильтр спама включён.
Деплой без аккаунта работает 6 часов. Ссылка для получения сохранит его бесплатно.
Сравнение хостингов для Vue
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Режим history в Vue Router | spa = true или переключатель в панели |
Правило _redirects |
Rewrite в vercel.json |
Нет: hash-режим или 404.html со статусом 404 |
| Отсутствующие файлы скриптов после деплоя | 404, понятная ошибка | index.html приложения |
index.html приложения |
404 |
| Серверный рендеринг Nuxt | Нет | Да | Да | Нет |
| Аккаунт до первого деплоя | Нет: 6 часов онлайн, затем сохраните бесплатно | Да | Да | Да, и репозиторий |
| Формы без бэкенда | Да, когда сайт в аккаунте | Да | Нет | Нет |
| Свой домен | Да, бесплатно | Да | Да | Да |
Для Vue-приложения, работающего в браузере, Lobsite — одна команда от dist/ до рабочего адреса: режим history включается одной настройкой, а у каждого деплоя есть URL предпросмотра.
Частые вопросы
Почему страницы Vue Router при обновлении показывают «Not found»?
Адреса режима history существуют только внутри приложения. Включите одностраничный режим — spa = true в lobsite.toml или Одностраничное приложение в настройках сайта, — чтобы эти пути открывали ваш index.html.
Какой режим лучше для Vue-приложения на Lobsite: hash или history?
History вместе с одностраничным режимом. Адреса чище, и поисковики считают их отдельными страницами. Hash-режим имеет смысл, только если вы не можете менять настройки сервера.
Можно задеплоить сайт на Nuxt в Lobsite?
Да, сгенерированный: выполните npx nuxi generate, затем npx lobsite .output/public. Страницы, которым нужен сервер Nuxt, например серверные маршруты, работать не будут.
Как показать представление «страница не найдена» во Vue-приложении?
Добавьте в конец маршрутов маршрут-ловушку: { path: "/:pathMatch(.*)*", component: NotFound }. С одностраничным режимом любой неизвестный путь страницы попадает в приложение, и что показать, решает роутер.