运行npm run dev时出现Websocket报错但项目代码未使用Websocket

故障排查与解决方案 #

1. 确认依赖版本一致性
   你当前使用的应该是Windows原生环境（团队其他成员使用WSL/Mac无问题），首先验证webpack-dev-server版本是否和团队其他成员一致，执行以下命令查看本地版本：
   npm list webpack-dev-server
   如果版本不同，安装团队统一使用的版本即可：
   npm install -D webpack-dev-server@<团队使用的版本号>

2. 调整webpack devServer配置（核心问题修复）
   你当前的配置中，proxy规则将所有/路径的请求都代理到了http://localhost:3000，webpack-dev-server默认的websocket请求路径/ws也会被代理到后端服务，后端没有对应ws服务就会触发报错。将proxy配置修改为如下格式，排除ws请求的代理即可：

devServer: {
  static: {
    directory: path.join(__dirname, '/src'),
  },
  // 修改后的proxy配置
  proxy: [
    {
      context: ['**', '!/ws/**'],
      target: 'http://localhost:3000',
      ws: false
    }
  ],
  // 新增配置，适配Windows环境下的ws连接
  allowedHosts: "all",
  client: {
    webSocketURL: 'ws://localhost:8080/ws',
  },
  compress: true,
  port: 8080,
}

3. 清理本地缓存重试
   删除本地的node_modules文件夹以及锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行npm install安装依赖后再启动项目，避免本地依赖缓存导致的异常。

4. 关闭本地代理工具
   检查本地是否开启了VPN、抓包工具（Fiddler/Charles等）、系统代理，这类工具会拦截websocket请求，关闭后再重试启动即可。

内容的提问来源于stack exchange，提问作者kay