Как подключить телефон к Vite серверу?
Тостеру: Отсутствует тег Vite =(
Имеется локальный сайт на Laravel. Открывается на локальном домене mysite.local. В .env прописано
APP_URL=http://mysite.local
Сборка фронта производится штатным Vite.
Конфиг Vite
import laravel from 'laravel-vite-plugin'; import path from 'path'; import { defineConfig } from 'vite'; export default defineConfig({ resolve: { alias: { '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), } }, plugins: [ laravel({ input : [ 'resources/sass/app.scss', 'resources/js/app.js', ], refresh: true, }), ], }); |
import laravel from 'laravel-vite-plugin'; import path from 'path'; import { defineConfig } from 'vite'; export default defineConfig({ resolve: { alias: { '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), } }, plugins: [ laravel({ input : [ 'resources/sass/app.scss', 'resources/js/app.js', ], refresh: true, }), ], });
На компе все работает, запускается, горячая автозамена и т.д.
Пытаюсь открыть сайт с мобильника. Для этого добавил опцию --host в команду запуска
vite dev --host
Однако вижу только заглушку вместо главной страницы сайта
скриншот с мобильника
Гугл не понимает, чего я от него хочу, поэтому обращаюсь к живым людям:
Как открыть локальный сайт с телефона при использовании Vite?
UPD
Читаю здесь https://github.com/vitejs/vite/discussions/3396 и не понимаю, почему у людей работает, а у меня нет...
Дополнительно:
vite dev --host
ради интереса заменить на
vite dev --host 0.0.0.0 или это идентично?
докерычто-то ещё используешь?
--host 192.168.0.100
Иначе перестают работать ссылки на css на компьютере. С нулями ссылки на компе тоже не работают, на мобиле та же заглушка.
--host 192.168.0.100
Иначе перестают работать ссылки на css на компьютере. С нулями ссылки на компе тоже не работают, на мобиле та же заглушка.
вот лучше остановиться на этом месте, всё должно работать по дефолу и без --host
и откуда это? APP_URL=mysite.local
почему тут не localhost ?
127.0.0.1 mysite.local
и по этому адресу открывается сайт в обычном режиме
Я сейчас запустил php сервер через артисан
php artisan serve --host=192.168.0.100 --port=5173
Потом запустил Vite
npm run vite -- --host=192.168.0.100
И теперь с мобильника все открылось.
Какая ему разница, на чем php вертится?
Теперь Vite запускается на :5174, а с мобилы я открываю :5173
Если открыть :5174 там будет vite-заглушка =)
Ответы:
А вы в телефоне тоже пишите http://mysite.local вместо 192.168.1.100.
Сайт не понимает 192.168.1.100 - он понимает только mysite.local
Это пошло от серверных решений когда на одном сервере и его IP вертятся сотни сайтов и приложений, обратиться к конкретному приложению можно исключительно по dns имени.
- тогда на телефоне нужна запись аналогичная той, что в hosts на компе, чтобы домен распознавался. или как мутить DNS сервер для резолвинга имени. Просто так не откроется.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос

Для подключения телефона к Vite серверу, вам необходимо выполнить следующие шаги:
1. Убедитесь, что ваш телефон и компьютер находятся в одной локальной сети.
2. Запустите Vite сервер на вашем компьютере, используя команду в терминале:
npm run dev
3. На вашем телефоне откройте браузер и введите IP адрес вашего компьютера, на котором запущен Vite сервер, с указанием порта (по умолчанию 3000). Например, "http://192.168.1.2:3000".
4. Теперь ваш телефон должен быть подключен к Vite серверу и отображать веб-страницы, которые вы разрабатываете.
Если у вас возникли проблемы с подключением телефона к Vite серверу, пожалуйста, убедитесь, что ваш брандмауэр разрешает соединение между устройствами в локальной сети и что IP адрес вашего компьютера правильно указан в адресной строке браузера на телефоне.
Надеюсь, эти инструкции помогут вам успешно подключить телефон к Vite серверу и начать разработку мобильных веб-приложений. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.