Пустая страница при развертывании приложения реакции на страницы github и vite
Когда я пытаюсь развернуть свое приложение для реагирования на страницы github с пакетом gh-pages, страница результатов пуста. страница результатов
Страница, которую я пытаюсь развернуть, находится здесь: ССЫЛКА Не знаю, имеет ли это значение, но сейчас я использую бесплатный домен, предоставленный мне GitHub: www.elvas.me
Я пытался следовать официальным документам реакции: Ссылка, но у меня это не сработало... Возможно, это потому, что я использую vite, а не приложение create-react-app?
*Редактировать*
Выяснил, что сайт пытается получить .js и .css не из того места.
Я просто не знаю, что я делаю не так...
Как мне это сделать? В index.html?
Я имею в виду, что в app.js, где вы определяете свои маршруты, определен ли «/» (домашний маршрут)?
Я так не думаю... Но я не использую реактивный маршрутизатор, он мне нужен?
Если у вас только один маршрут, то нет. Но если вы хотите разработать много маршрутов в будущем, я рекомендую вам использовать react-router.
Для этого конкретного проекта мне не нужно более одного маршрута :)
Вы сделали npm run build? Похоже, ваши файлы не являются файлами сборки в репозитории github.
Я сделал! Я использую пряжу, поэтому yarn run build. Файлы не выглядят одинаково, потому что я что-то тестировал, но теперь все обновлено. Все еще не работает.
когда я делаю yarn deploy, он автоматически делает yarn run build правильно?
![[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]](https://cdn-images-1.medium.com/max/120/1*bunb02UuqTQf8phM9ZI1dg.png)
Ответы 2
Итак, чтобы решить эту проблему, мне нужно было только добавить base:"{repName}" в файл vite.config.ts.
Источник: https://vitejs.dev/guide/static-deploy.html
Изображения не загружались, я использовал это, чтобы исправить их: Страницы Github vite JS build не показывают изображения
Я вижу, что вам удалось успешно развернуть свой проект React на страницах Github, но вот как это сделал я, если кому-то понадобится помощь:
- Прежде всего, убедитесь, что ваша папка «.git» и ваш проект находятся в одной папке.
- Беги
npm run build. Теперь у вас должна быть папкаdist. - Откройте файл
vite.config.js(или.ts). - Добавьте файл
baseс именем вашего репозитория. Включите два/.
Пример: допустим, URL-адрес вашего проекта на github — https://github.com/atlassian/react-beautiful-dnd.
export default defineConfig({
base: "/react-beautiful-dnd/",
plugins: [react()],
});
- Откройте файл
.gitignoreи удалите из него строкуdist. Вы хотите убедиться, что папкаdistотправлена на github. git add .git commit -m "deploy"git subtree push --prefix dist origin gh-pages- Подождите пару минут (в моем случае это заняло 4 минуты) и откройте страницу. В приведенном выше примере URL-адрес будет выглядеть так: https://atlassian.github.io/react-beautiful-dnd
Если он по-прежнему показывает пустую страницу, скорее всего, это связано с шагом 3. Убедитесь, что вы добавили правильный URL-адрес репозитория и что он начинается и заканчивается знаком /.
Вот об этом, я надеюсь, что это поможет. Я использовал этот пост в блоге для руководства, это более подробное объяснение вышеизложенного.
Вы установили маршрут "/"?