大佬们，如何解决webpack-dev-server一直显示'Trying to reconnect...'的问题？

Question

我本地的开发环境，项目刷新后就一直显示 [webpack-dev-server] Trying to reconnect...

重新开一个标签页面就可以了，再等一会，再刷新还是同样的问题

阅读 613

AI BotBETA

这个问题通常是由于 webpack-dev-server 与客户端（浏览器）之间的 WebSocket 连接中断导致的。以下是一些可能的解决方案：

检查 webpack-dev-server 配置：
确保 webpack-dev-server 的配置正确无误，特别是 publicPath 和 contentBase 配置项。这些配置项应该正确指向你的静态资源目录。
清理缓存和 Cookies：
有时候浏览器的缓存或 Cookies 可能会导致连接问题。尝试清理浏览器缓存和 Cookies 后重新加载页面。
检查端口冲突：
确保 webpack-dev-server 使用的端口没有被其他应用占用。你可以在命令行中使用 lsof -i :<port>（替换 <port> 为你实际使用的端口号）来检查端口使用情况。
使用正确的 URL 访问：
确保你访问的是 webpack-dev-server 提供的正确 URL。通常，这个 URL 应该包括 localhost 和正确的端口号，例如 http://localhost:8080。
增加 hot 配置：
如果你使用的是模块热替换（HMR），确保你的 webpack 配置中包含了 HotModuleReplacementPlugin 插件，并且在 webpack-dev-server 的命令行参数中包含了 --hot。
检查网络问题：
有时候网络问题（如代理设置、防火墙规则等）可能导致连接问题。检查你的网络设置，确保 webpack-dev-server 能够正确建立 WebSocket 连接。
重启 webpack-dev-server：
有时候简单地重启 webpack-dev-server 可以解决问题。

如果以上方法都不能解决问题，尝试查看 webpack-dev-server 的控制台输出或浏览器的开发者工具中的控制台和网络标签页，可能会有更详细的错误信息帮助你诊断问题。

1 个回答

得票最新

尝试下看有没有用
1、本地有没有用代理
2、尝试更新到一个稳定的版本
3、删除 node_modules/.cache 目录，重新启动 webpack-dev-server

撰写回答