Vue.js에서 dev server가 https 모드에있을 때 핫 리로드가 작동하지 않는 것을 어떻게하고 싶습니다.

Vue.js의 개발 서버에는 개발중인 코드 업데이트에 맞게 페이지가 자동으로 업데이트되는 HMR (Hot Module Replacement)이라는 기능이 있습니다.
(정확하게는 webpack의 기능)
일일이 브라우저를 리로드하지 않아도 변경이 반영되어 가기 때문에 매우 편리합니다만, 개발 서버를 https 모드로 움직이고 있는 경우, 즉

yarn serve --https

에서 시작하거나 vue.config.js에서,

vue.config.js

module.exports = {
  // ...
  devServer: {
    https: true
  }
}

그렇다면 왜이 HMR이 작동하지 않는 것 같습니다.

어떻게 하는지

devServer의 설정 항목에 다음을 추가합니다.

vue.config.js

module.exports = {
  // ...
  devServer: {
    https: true,
+   host: 'localhost',
+   port: 8080
  }
}

이제 HTTPS 모드에서도 HMR이 작동합니다