Развёртывание Vue с Vite на Lizard

Развёрните Vue-приложение, собранное Vite, как статический веб-сервис на Lizard. Сборка выдаёт dist/, а nginx отдаёт файлы на порту 80. Для серверного рендеринга и серверных маршрутов Nuxt используйте гайд по Nuxt.

Подготовка проекта

Выполните из директории Vue-приложения с package.json, lock-файлом и конфигурацией Vite. Оставьте скрипт сборки из заготовки, включая vue-tsc, если он проверяет ваш TypeScript-код. Сборка должна завершиться созданием Vite-бандла в dist/.

Оставьте base: '/' для сайта в корне домена. Если используется префикс пути, синхронизируйте base в Vite с base роутера и URL, по которому реально работает приложение. Пользовательская выходная директория требует Dockerfile, копирующего эту директорию.

Локальная проверка сборки

npm ci
npm run build
npm run preview

Используйте локальный preview-URL, чтобы проверить компонент, загружающий данные, и страницу, доступную через роутер. vite preview предназначен для этой локальной проверки; nginx отдаёт продакшен-файлы. См. гайд по деплою Vite для описания результатов сборки и поведения preview.

Деплой

После настройки CLI развёрните текущую исходную директорию:

lizard init --name vue-app
lizard add --service web
lizard up --service web --port 80
lizard logs --build --service web --json
lizard ps --json

Исключите из загрузки локальные зависимости, dist/ и файлы .env. Если нет переопределений команд, lizardpack распознаёт Vite и соберёт статический образ. Не добавляйте npm run dev как команду запуска сервиса.

Режим history Vue Router

Если приложение использует createWebHistory, сервер должен обрабатывать прямые запросы к клиентским маршрутам. Стандартный статический образ отдаёт index.html, когда не находит файл, поэтому /account может дойти до Vue Router при жёсткой перезагрузке. Подогнать base роутера под base Vite можно, например, через createWebHistory(import.meta.env.BASE_URL). См. режимы history в Vue Router.

Проверьте и навигацию с главной страницы, и открытие /account в новой вкладке. Добавьте общий вариант представления для отсутствующих клиентских маршрутов. Фолбэк сервера возвращает HTTP 200 даже для неизвестных путей; он не выдаёт SEO-ориентированные ответы 404. Прочитайте статические маршруты и 404 перед использованием этой конфигурации для индексируемого контентного сайта.

Переменные и запросы к API

Vite встраивает значения VITE_* в браузерный бандл во время сборки. Используйте их только для публичных значений, например публичного HTTPS-URL вашего API. При использовании lizard up закоммитьте их в .env.production (убедитесь, что .gitignore не исключает этот файл); переменные Lizard попадают в сборку только для сервиса GitHub, как описано в разделе переменные времени сборки. Затем проверьте реальный сетевой запрос пересобранного приложения. Перезапуск только во время выполнения не может заменить значение внутри собранного JavaScript.

Если запросы падают только после деплоя, проверьте CORS на API и убедитесь, что браузер не обращается к localhost или к приватному хосту бэкенда. Если HTML загрузился, но ассеты нет — проверьте base в Vite и пути к ассетам. Для страниц, которым нужен HTML до запуска JavaScript, выбирайте рендеринг Nuxt или явный шаг пререндеринга.

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

Обновлено 9 октября 2026 г.