Как подключить телефон к Vite серверу?

Ссылка скопирована
1 ответ

Тостеру: Отсутствует тег 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 серверу?

Гугл не понимает, чего я от него хочу, поэтому обращаюсь к живым людям:

Как открыть локальный сайт с телефона при использовании Vite?

UPD
Читаю здесь https://github.com/vitejs/vite/discussions/3396 и не понимаю, почему у людей работает, а у меня нет...

Дополнительно:

vite dev --host

ради интереса заменить на
vite dev --host 0.0.0.0 или это идентично?
докерычто-то ещё используешь?

  • Владислав Лысков, Забыл добавить. Мне приходиться указывать IP компа
    --host 192.168.0.100
    Иначе перестают работать ссылки на css на компьютере. С нулями ссылки на компе тоже не работают, на мобиле та же заглушка.
  • Владислав Лысков, докеры не используются. Простой локальный WAMP сервер (OpenServer)
  • Сергей delphinpro,

    --host 192.168.0.100
    Иначе перестают работать ссылки на css на компьютере. С нулями ссылки на компе тоже не работают, на мобиле та же заглушка.

    вот лучше остановиться на этом месте, всё должно работать по дефолу и без --host

    и откуда это? APP_URL=mysite.local
    почему тут не localhost ?

  • Владислав Лысков, в hosts добавлена запись
    127.0.0.1 mysite.local
    и по этому адресу открывается сайт в обычном режиме
  • Сергей delphinpro, а с телефона как открываешь?
  • Владислав Лысков, http://192.168.0.100:5173

    Я сейчас запустил 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 сервер для резолвинга имени. Просто так не откроется.
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Юрий Linux Ответ

    Для подключения телефона к Vite серверу, вам необходимо выполнить следующие шаги:

    1. Убедитесь, что ваш телефон и компьютер находятся в одной локальной сети.
    2. Запустите Vite сервер на вашем компьютере, используя команду в терминале:

    npm run dev

    npm run dev

    3. На вашем телефоне откройте браузер и введите IP адрес вашего компьютера, на котором запущен Vite сервер, с указанием порта (по умолчанию 3000). Например, "http://192.168.1.2:3000".
    4. Теперь ваш телефон должен быть подключен к Vite серверу и отображать веб-страницы, которые вы разрабатываете.

    Если у вас возникли проблемы с подключением телефона к Vite серверу, пожалуйста, убедитесь, что ваш брандмауэр разрешает соединение между устройствами в локальной сети и что IP адрес вашего компьютера правильно указан в адресной строке браузера на телефоне.

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

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно