Docker容器中Webpack5 HMR失效求助（Vue2.6.14）

环境背景 #

• Vue.js 2.6.14，基于vue-cli+Webpack5构建
• Docker部署，Nginx代理端口映射：localhost:3000（容器内服务）→localhost:4000（本地访问）

问题原因分析 #

1. Webpack5配置逻辑变更：Webpack4中devServer.public同时管控静态资源公共访问地址和HMR的WebSocket连接地址，Webpack5将WebSocket相关配置独立拆分到devServer.client.webSocketURL，原配置逻辑不再适配。
2. 容器网络监听限制：容器内的devServer默认仅监听localhost，导致本地通过代理端口4000无法访问容器内的WebSocket服务。
3. Nginx未适配WebSocket协议：WebSocket请求需要HTTP协议升级，Nginx默认不处理该逻辑，会直接阻断ws连接请求。

解决方案 #

1. 调整vue.config.js的devServer配置 #

确保容器内服务监听所有网卡，同时指定WebSocket客户端连接地址为代理后的本地端口：

module.exports = {
  devServer: {
    host: '0.0.0.0', // 容器内必须监听所有网卡，否则外部无法访问
    port: 3000,
    hot: true, // 强制开启HMR功能
    client: {
      // 指定客户端WebSocket连接地址为代理后的本地端口
      webSocketURL: 'ws://localhost:4000/ws',
      overlay: { // 可选：开启错误弹窗提示
        warnings: false,
        errors: true
      }
    }
  }
}

2. 更新Nginx代理配置，支持WebSocket转发 #

在Nginx的server块中添加WebSocket协议升级配置，确保请求能正确转发到容器内服务：

server {
  listen 4000;
  server_name localhost;

  location / {
    proxy_pass http://你的容器服务地址:3000; # 替换为容器内服务的实际地址（如容器名/内部IP）
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # WebSocket协议升级必备配置
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Origin ""; # 避免跨域拦截
  }
}

3. 验证配置 #

• 重启Nginx和容器内的Vue开发服务
• 修改组件代码，查看浏览器控制台是否出现HMR更新日志，同时在开发者工具的Network→WS标签下确认WebSocket连接成功

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