MacOS + Sail (Docker) + Vite = Браузер не может подключиться через порт 5173

Проблема Судя по оболочке в терминале, Vite работает, но не обновляет страницу, не распознает изменения CSS и недоступен через порт 5173 на локальном хосте.

Контекст

  • У меня macOS Sonoma 14.5.
  • Запуск Ларавел 11
  • Запуск Laravel Sail
  • Запускаем npm run dev для использования Vite
  • Приложение работает нормально без сайта на http://localhost, даже когда Vite работает, но не обновляется.
  • Вывод для Vite в терминале указывает на то, что он работает и просматривает файлы.
  • Вывод для Vite в консоли Safari показывает, что страница не может получить доступ к 5173.

Вывод оболочки в терминале

  VITE v5.3.1  ready in 106 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.20.0.3:5173/
  ➜  press h + enter to show help

  LARAVEL v11.10.0  plugin v1.0.4

  ➜  APP_URL: http://localhost

Консольный вывод

[Error] Failed to load resource: Could not connect to the server. (client, line 0)
[Error] Failed to load resource: Could not connect to the server. (app.css, line 0)
[Error] Failed to load resource: Could not connect to the server. (header.js, line 0)
[Error] Failed to load resource: Could not connect to the server. (app.js, line 0)
[Log] Users Data: – [] (0) (localhost, line 164)

Если Vite работает в Docker, привязали ли вы порт хоста к порту контейнера 5173?

Phil 20.06.2024 04:14

Кроме того, я не понимаю «не обновляет страницу, не распознает изменения CSS и не доступен через порт 5173». Как вы можете знать, что он не обновляет и не распознает изменения CSS, если вы даже не можете его открыть?

Phil 20.06.2024 04:15
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
0
2
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я решил проблему. Причина заключалась в том, что я сослался на порт 5174 в строке 13 Docker.yml: - '${VITE_PORT:-5174}:${VITE_PORT:-5173}', но я не добавил эту ссылку в .env VITE_PORT=5174.

Как только я добавил это и перестроил, все заработало.

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