Развёртывание 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. Задайте их через переменные и секреты, затем проверьте реальный сетевой запрос пересобранного приложения. Перезапуск только во время выполнения не может заменить значение внутри собранного JavaScript.

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

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