Vite.js React Build не перенаправляет на Netlify и Vercel

Question

Я сделал реактивную сборку с vite.js. При сборке для производства и тестирования на локальном хосте все работает нормально. Но когда я развертываю Netlify или Vercel, маршруты, которые я создал с помощью response-router, недоступны путем прямого ввода их URL-адреса, а только с главной страницы ('/') через ссылки внутри приложения.

Если я нажимаю ссылку маршрута в приложении, маршрут работает, но если я ввожу URL-адрес напрямую (например: mypage/about), я получаю ошибку 404.

Я зарегистрировался в службе поддержки vercel, и они сказали, что, вероятно, в конфигурации отсутствует перенаправление, которое, например, установлено по умолчанию с помощью приложения create-response-app. В CRA это выглядит так

      {
  "redirects: [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

После просмотра документации vite.js я не могу найти никаких подсказок о том, как настроить перенаправление в vite.

Answer 1

Это не проблема vite.js, но из-за отсутствия файла конфигурации для vercel, который по умолчанию добавляется к существующим шаблонам. Для одностраничного приложения файлы html для маршрутов, созданных с помощью маршрутизатора реакции, не существуют, поэтому что-то на сервере должно создавать перезаписи, чтобы гарантировать, что каждый запрос указывает на '/' или index.html. В Vercel это можно сделать, добавив перезапись в файл конфигурации в корне проекта под названием

      vercel.json

https://vercel.com/docs/configuration Добавить перезапись для всех маршрутов в файл, которые указывают на '/' или '/index.html'

      {
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

или же

      {
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Answer 2

Если вы используете vite, создайте папку с именем public и добавьте в нее файл с именем _redirects, для остальных других сборщиков просто добавьте файл _redirects в общую папку.