Доступ к серверу разработки Nuxt.js на мобильном устройстве

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

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

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

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

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

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

• port — по умолчанию 3000.
• host — по умолчанию localhost.

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

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