<span id="deploy-vue-with-vite-on-lizard" />

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

Развёрните Vue-приложение, собранное Vite, как статический веб-сервис на Lizard. Сборка выдаёт `dist/`, а nginx отдаёт файлы на порту `80`. Для серверного рендеринга и серверных маршрутов Nuxt используйте [гайд по Nuxt](https://lizard.build/ru/docs/framework-guides/nuxt).

<span id="prepare-the-project" />

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

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

| Параметр | Значение |
|---|---|
| Сборка | `npm run build` |
| Выход | `dist/` |
| Команда запуска | Нет для пути статического обнаружения |
| Порт сервиса | `80` |

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

<span id="check-the-build-locally" />

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

```bash
npm ci
npm run build
npm run preview
```

Используйте локальный preview-URL, чтобы проверить компонент, загружающий данные, и страницу, доступную через роутер. `vite preview` предназначен для этой локальной проверки; nginx отдаёт продакшен-файлы. См. [гайд по деплою Vite](https://vite.dev/guide/static-deploy.html) для описания результатов сборки и поведения preview.

<span id="deploy" />

## Деплой

После [настройки CLI](https://lizard.build/ru/docs/framework-guides#prepare-the-project) развёрните текущую исходную директорию:

```bash
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` как команду запуска сервиса.

<span id="vue-router-history-mode" />

## Режим history Vue Router

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

Проверьте и навигацию с главной страницы, и открытие `/account` в новой вкладке. Добавьте общий вариант представления для отсутствующих клиентских маршрутов. Фолбэк сервера возвращает HTTP 200 даже для неизвестных путей; он не выдаёт SEO-ориентированные ответы 404. Прочитайте [статические маршруты и 404](https://lizard.build/ru/docs/framework-guides/static-routing) перед использованием этой конфигурации для индексируемого контентного сайта.

<span id="variables-and-api-requests" />

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

Vite встраивает значения `VITE_*` в браузерный бандл во время сборки. Используйте их только для публичных значений, например публичного HTTPS-URL вашего API. Задайте их через [переменные и секреты](https://lizard.build/ru/docs/variables), затем проверьте реальный сетевой запрос пересобранного приложения. Перезапуск только во время выполнения не может заменить значение внутри собранного JavaScript.

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

См. [проверенные версии и результаты в облаке](https://lizard.build/ru/docs/framework-guides/validation) для итогов проверок деплоя 9 сентября 2026 года и их ограничений.