Дата публикации
19 Декабря 2020
Дата изменения
19 Декабря 2020
Уникальных просмотров
222

Для начала определимся что мы хотим сделать. Мы хотим иметь возможность сразу во время разработки, просматривать приложение (сайт) на мобильном устройстве. Это очень важно, т. к. десктопная версия браузеров отличается от браузеров на мобильных устройствах с разной операционной системой. В итоге мы можем получить неправильное или отличное от желаемого отображение (или логику поведения) некоторых элементов на мобильных устройствах.

Есть пакеты, которые позволят нам получить доступ к серверу разработки (localhost), путем открытия локального IP-адреса. Однако не все эти пакеты могут нам подойти, например, в некоторых отсутствует hot-reload, некоторые могут быть несовместимы с Nuxt.js или иметь какие-либо другие проблемы.

Nuxt.js позволяет очень быстро и без сторонних пакетов включить данный функционал. Этим мы и займемся.

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

Включаем доступ

Открываем файл nuxt.config.js и указываем новый параметр:

server: {
  port: 3000,
  host: '0.0.0.0',
},

Теперь при запуске команды npm run dev, в терминале вы увидите уникальный IP адрес, по которому вы сможете получить доступ к разрабатываемому вами приложению с мобильного устройства (не забывайте что ваши устройства должны быть внутри одной сети).

Доступ к прилодению Nuxt.js с телефона

Доступ по localhost:3000 будет так же все еще доступен. Вот так легко и просто, за считанные секунды вы можете тестировать ваше приложение с любого мобильного телефона / планшета / ноутбука.

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,1075 s
Время запросов: 0,1075 s
Количество запросов: 28
Источник: cache