浏览器控制台中 WebSocket connection to ‘ws://192.168.43.177:8080/ws‘ failed: 解决

今天在写Vue在浏览器打开控制台调试发现
WebSocket connection to 'ws://192.168.43.177:8080/ws' failed: 

这是WebSocket连接失败，从错误信息来看，问题可能出在前端开发环境配置上，特别是webpack-dev-server的WebSocket配置。

一、webpack-dev-server配置

（一）检查配置

1、确保你的webpack-dev-server配置正确。
2、确认host和port配置正确并匹配你的服务器设置。确保端口开启。

（二）更新webpack-dev-server配置

  确保你的webpack-dev-server配置正确设置了WebSocket地址。通常，这些配置位于webpack.config.js或vue.config.js文件中。大部分是代理问题，这时我们修改下代理，加个ws参数，应该就没问题了

  在vue项目中找到vue.config.js，修改配置，注意调整端口和IP地址

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    host: '192.168.43.177',  // 你的本地IP地址
    // https:true,
    port: 8080,
    client: {
      webSocketURL: 'ws://192.168.43.177:8080/ws',
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  },
  transpileDependencies: true
})
module.exports = {
  lintOnSave: false,
}

二、浏览器缓存

不得不说清除浏览器缓存很能有效解决问题，或者使用无痕模式（隐私模式）来排除缓存问题。