Диагностика пустого экрана SPA в продакшене: base path, роутинг, rewrites, переменные окружения и чек-лист деплоя.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — senior frontend-инженер, который диагностирует белый экран в SPA после деплоя. Ситуация: приложение локально работает, а на Vercel открывается пустая или белая страница. Данные: - Фреймворк: [React / Angular / Vue] - Сборщик и конфиг: [Vite / CRA / Angular CLI + вставь vite.config или аналог] - Роутинг: [client-side history / hash] - Ошибки в консоли и Network: [вставь] - Настройки деплоя: [build command, output directory, vercel.json, если есть] Задачи: 1. Перечисли самые частые причины белого экрана после деплоя и отметь, какие подходят под мои данные. 2. Объясни, почему проблема проявляется только в продакшене. 3. Дай пошаговое исправление с готовыми фрагментами конфигурации. 4. Составь чек-лист для будущих деплоев. Обязательно проверь: - base и publicPath, пути к ассетам; - настройку SPA-роутинга и rewrites на index.html; - переменные окружения (префиксы VITE_ / NEXT_PUBLIC_, заданы ли они в Vercel); - несовпадение каталога сборки с Output Directory; - ошибки, которые падают только в production-сборке. Ограничения: бэкенда нет, фокус на фронтенде и деплое, решения — по рекомендациям Vercel. Формат: Диагноз → Корневая причина → Пошаговое исправление → Чек-лист деплоя.
```text Ты — senior frontend-инженер, который диагностирует белый экран в SPA после деплоя. Ситуация: приложение локально работает, а на Vercel открывается пустая или белая страница. Данные: - Фреймворк: [React / Angular / Vue] - Сборщик и конфиг: [Vite / CRA / Angular CLI + вставь vite.config или аналог] - Роутинг: [client-side history / hash] - Ошибки в консоли и Network: [вставь] - Настройки деплоя: [build command, output directory, vercel.json, если есть] Задачи: 1. Перечисли самые частые причины белого экрана после деплоя и отметь, какие подходят под мои данные. 2. Объясни, почему проблема проявляется только в продакшене. 3. Дай пошаговое исправление с готовыми фрагментами конфигурации. 4. Составь чек-лист для будущих деплоев. Обязательно проверь: - base и publicPath, пути к ассетам; - настройку SPA-роутинга и rewrites на index.html; - переменные окружения (префиксы VITE_ / NEXT_PUBLIC_, заданы ли они в Vercel); - несовпадение каталога сборки с Output Directory; - ошибки, которые падают только в production-сборке. Ограничения: бэкенда нет, фокус на фронтенде и деплое, решения — по рекомендациям Vercel. Формат: Диагноз → Корневая причина → Пошаговое исправление → Чек-лист деплоя. ```
{
"messages": [
{
"role": "user",
"content": "Ты — senior frontend-инженер, который диагностирует белый экран в SPA после деплоя.\n\nСитуация: приложение локально работает, а на Vercel открывается пустая или белая страница.\n\nДанные:\n- Фреймворк: [React / Angular / Vue]\n- Сборщик и конфиг: [Vite / CRA / Angular CLI + вставь vite.config или аналог]\n- Роутинг: [client-side history / hash]\n- Ошибки в консоли и Network: [вставь]\n- Настройки деплоя: [build command, output directory, vercel.json, если есть]\n\nЗадачи:\n1. Перечисли самые частые причины белого экрана после деплоя и отметь, какие подходят под мои данные.\n2. Объясни, почему проблема проявляется только в продакшене.\n3. Дай пошаговое исправление с готовыми фрагментами конфигурации.\n4. Составь чек-лист для будущих деплоев.\n\nОбязательно проверь:\n- base и publicPath, пути к ассетам;\n- настройку SPA-роутинга и rewrites на index.html;\n- переменные окружения (префиксы VITE_ / NEXT_PUBLIC_, заданы ли они в Vercel);\n- несовпадение каталога сборки с Output Directory;\n- ошибки, которые падают только в production-сборке.\n\nОграничения: бэкенда нет, фокус на фронтенде и деплое, решения — по рекомендациям Vercel.\n\nФормат: Диагноз → Корневая причина → Пошаговое исправление → Чек-лист деплоя."
}
]
}