Vue - WebSocket connection failed(webpack) 해결방법

VUE 웹 개발 중에 WebSocket connection failed 에러 발생에  대한 해결책을 알아보겠습니다.

webSocket 에러

구글링으로 블로그들에 올라와있는 방법으로 해보았지만 해결이 되지 않았습니다. 결국 공식문서확인 후 해결

 

문제의 원인 :  webpack의 기능중 webpack-dev-server에서 자동으로 WebSocket을 ws를 기본값으로 세팅함

해결방법 : vue.config.js 파일에 아래와 코드 추가로 WebSocketServer를 사용하지 않음으로 설정함

 

추가한  코드

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
	devServer: {
		webSocketServer: false,//사용하지 않게 변경
	},
});

 

해당 코드 설정 후 console창 이 깔끔해졌습니다. 

저는 하루정도 골머리 썩었지만 다른 분들은 빠르게 해결되셨으면 좋겠습니다. ㅎㅎ

 

 

 

webpack 공식문서 참고 

https://webpack.js.org/configuration/dev-server/#devserverwebsocketserver