vue项目提示 WebSocketClient.js:49 WebSocket connection to ‘ws://xxxx/ws‘ failed: Invalid frame header

项目信息

vue-cli创建的vue3+webpack5项目；

问题现状

配置proxy代理后，控制台报错，不影响使用，但是不美观，并且不利于在控制台调试代码；

原因定位

代理问题，新配置的接口代理，影响到了项目内置的本地服务代理配置，参考Websocket connection failed, Invalid frame header · Issue #1850 · vuejs/vue-cli · GitHub

解决方案

方案一

一刀切，但是会导致修改本地代码时，无法触发模块热替换；

// vue.config.js

devServer: {
  proxy: {
    ...
  },
  // 本地服务停用webSocket
  webSocketServer: false,
},

方案二（推荐）

优化代理配置，自定义代理增加ws配置，暂未发现副作用；
 

// vue.config.js

devServer: {
  proxy: {
    "/": {
      ...
      // 自定义代理增加配置
      ws: false,
    },
  },
},

提示：修改完vue.config.js一定要重启项目