[ Vue.js ] Error - [WDS] Disconnected! 에러

Linux, Vue.js 3 - 프로젝트를 구동하고 있는데, 아래와 같은 에러가 주기적으로 콘솔에 출력이 됩니다.

In Vue.js 3 project, there's an error that keep receiving from the server.

[WDS] Disconnected!

에러가 발생하였습니다.

---

21.11.09 [ 1차 수정 ] 

해당 에러가 발생하고 해결하고 보니 다시 또 발생하더군요.. (=해결못함 ^^)

그래서 좀 더 자료를 찾아보니, 해당 부분은 서버쪽의 커넥션 오류에 더 가깝다는 결론을 내었습니다.

현재 당신의 프로젝트는 dev 로 돌리고 있기 때문에 오류를 출력한다. 라는 의미 인데, 왜 이게 갑자기 나는걸까요? 

원래는 잘 실행 되었었는데...

 

What does '[WDS] Disconnected!' error mean with webpack and Vue.js?

 

---

반응형

■ 해결 방법

Vue.js 를 예시로 설명하겠습니다.

root 경로 = 프로젝트의 바로 아래 경로 (= projectName/~ ) 에 vue.config.js 파일을 생성합니다.

그 안에

module.exports = {
  devServer: {
    disableHostCheck: true,
  },
};

를 작성해주시고, 저장해주시면 에러가 말끔하게 사라집니다.

Host의 주소를 확인하는 작업인데, 해당 기능을 off 해버리는 것입니다.

 

 

■ 에러 원인: 작성된 포트 번호와 실제 구동한 포트번호의 불일치.

해당 에러는 포트 번호가 일치하지 않아 발생하는 문제이며, dev 모드로 개발시에 화면 출력에 문제가 생길 수 있습니다. 미리 처리해주시는게 좋아요

예시) 

node에 작성된 서버를 구동하려고 하는 port number = 8080,

하지만 실제로 본인이 출력한 포트번호는 8081 일 때 출력될 수 있습니다.

■ Why?

8080포트에는 Apache 서버가 구동 중이었고,
그 위 /var/www/html/projectName/~ 에 추가적으로 서버를 구동시킨 것이기 때문에
npm run serve 등을 실행하였을 때 자동으로 포트가 변경되어져 출력이 됩니다.

 

 

참고사항

Keep getting [WDS] Disconnected! error