프로젝트 진행중에 휴대폰에서 레이아웃을 볼때랑 pc에서 창 넓이를 줄여서 레이아웃을 볼 때 레이아웃이 다르게 표시되는 경우가 있었습니다.

매번 빌드해서 휴대폰에서 확인하는건 조금 번거롭다는 생각이 들었고, 'npm run dev'시에 휴대폰에서 바로바로 테스트 할 수 있으면 좋을 것 같다는 생각을 하였습니다.

nuxt.config.ts 설정

export default defineNuxtConfig({
  ...,
  devServer: {
    host: "0.0.0.0",
    port: 3111,
  },
});

위와 같이 설정하였다고 가정하면, 빌드하면 아래와 같이 나타납니다.

큐알로 접속을 하여도 무방하고, http://192.168.0.118:3111/ 로 접속해도 됩니다.

이렇게 해도 접속이 안될때가 있는데, 이런 경우 윈도우의 방화벽을 전부 꺼주면 접속이 될 수도 있습니다. 저 같은 경우는 방화벽까지 꺼야 접속이 되었습니다.