Пустая страница при развертывании приложения реакции на страницы github и vite

Когда я пытаюсь развернуть свое приложение для реагирования на страницы github с пакетом gh-pages, страница результатов пуста. страница результатов

Страница, которую я пытаюсь развернуть, находится здесь: ССЫЛКА Не знаю, имеет ли это значение, но сейчас я использую бесплатный домен, предоставленный мне GitHub: www.elvas.me

Я пытался следовать официальным документам реакции: Ссылка, но у меня это не сработало... Возможно, это потому, что я использую vite, а не приложение create-react-app?

*Редактировать*

Выяснил, что сайт пытается получить .js и .css не из того места.

Я просто не знаю, что я делаю не так...

Вы установили маршрут "/"?

Silent observer 21.11.2022 13:30

Как мне это сделать? В index.html?

Duarte Elvas 21.11.2022 13:33

Я имею в виду, что в app.js, где вы определяете свои маршруты, определен ли «/» (домашний маршрут)?

Silent observer 21.11.2022 13:34

Я так не думаю... Но я не использую реактивный маршрутизатор, он мне нужен?

Duarte Elvas 21.11.2022 13:35

Если у вас только один маршрут, то нет. Но если вы хотите разработать много маршрутов в будущем, я рекомендую вам использовать react-router.

Silent observer 21.11.2022 13:38

Для этого конкретного проекта мне не нужно более одного маршрута :)

Duarte Elvas 21.11.2022 13:39

Вы сделали npm run build? Похоже, ваши файлы не являются файлами сборки в репозитории github.

clxrity 21.11.2022 18:17

Я сделал! Я использую пряжу, поэтому yarn run build. Файлы не выглядят одинаково, потому что я что-то тестировал, но теперь все обновлено. Все еще не работает.

Duarte Elvas 21.11.2022 18:20

когда я делаю yarn deploy, он автоматически делает yarn run build правильно?

Duarte Elvas 21.11.2022 19:32
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
Я научился создавать карусель в ReactJS с помощью библиотеки Splide.
Краткое введение в Styled-компоненты
Краткое введение в Styled-компоненты
В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту...
ДЕНЬ 8 | Страница обзора в React
ДЕНЬ 8 | Страница обзора в React
Сегодня я сделал страницу обзора с помощью react. Я использовал некоторые иконки из reacting icons и использовал генератор случайных чисел для...
Как настроить среду разработки React.
Как настроить среду разработки React.
весь процесс настройки среды разработки react.
Что вы должны знать о JSX - объяснение менее чем за 2 минуты
Что вы должны знать о JSX - объяснение менее чем за 2 минуты
React - это библиотека JavaScript для создания пользовательских интерфейсов.
Как использовать get bounds с react-leaflet и данными JSON
Как использовать get bounds с react-leaflet и данными JSON
Я считаю, что получить границы из библиотеки leaflet Js очень просто, но использование этой функции может быть немного сложным. Поэтому позвольте мне...
1
9
726
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Итак, чтобы решить эту проблему, мне нужно было только добавить base:"{repName}" в файл vite.config.ts.

Источник: https://vitejs.dev/guide/static-deploy.html

Изображения не загружались, я использовал это, чтобы исправить их: Страницы Github vite JS build не показывают изображения

Я вижу, что вам удалось успешно развернуть свой проект React на страницах Github, но вот как это сделал я, если кому-то понадобится помощь:

  • Прежде всего, убедитесь, что ваша папка «.git» и ваш проект находятся в одной папке.

  1. Беги npm run build. Теперь у вас должна быть папка dist.
  2. Откройте файл vite.config.js (или .ts).
  3. Добавьте файл base с именем вашего репозитория. Включите два /.

Пример: допустим, URL-адрес вашего проекта на github — https://github.com/atlassian/react-beautiful-dnd.

export default defineConfig({
  base: "/react-beautiful-dnd/",
  plugins: [react()],
});
  1. Откройте файл .gitignore и удалите из него строку dist. Вы хотите убедиться, что папка dist отправлена ​​на github.
  2. git add .
  3. git commit -m "deploy"
  4. git subtree push --prefix dist origin gh-pages
  5. Подождите пару минут (в моем случае это заняло 4 минуты) и откройте страницу. В приведенном выше примере URL-адрес будет выглядеть так: https://atlassian.github.io/react-beautiful-dnd

Если он по-прежнему показывает пустую страницу, скорее всего, это связано с шагом 3. Убедитесь, что вы добавили правильный URL-адрес репозитория и что он начинается и заканчивается знаком /.

Вот об этом, я надеюсь, что это поможет. Я использовал этот пост в блоге для руководства, это более подробное объяснение вышеизложенного.

Другие вопросы по теме