Docker运行Vue全栈项目时HMR热重载不生效问题求助

解决步骤 #

1. 修正vue.config.js配置 #

补全HMR和反向代理适配的必要参数：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/assets/css/global.scss";`,
      },
    },
  },
  devServer: {
    allowedHosts: 'all', // 关闭主机校验，适配Nginx反向代理场景
    hot: true, // 显式开启热重载
    client: {
      // 适配Nginx代理的websocket地址，若你对外访问端口不是8080可自行修改
      webSocketURL: 'ws://localhost:8080/ws',
      overlay: true, // 代码报错时直接在页面浮层提示，方便调试
    },
    watchOptions: {
      ignored: /node_modules/,
      aggregateTimeout: 300,
      poll: 1000,
    },
  }
};

2. 优化Nginx反向代理配置 #

新增HMR专用的websocket路径代理规则，替换原有/sockjs-node配置段：

server {
    listen 80;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://client:8000;
        proxy_redirect off;
    }

    # 兼容新旧版Vue CLI的HMR websocket路径
    location ~* ^/(sockjs-node|ws) {
        proxy_pass http://client:8000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_read_timeout 86400; # 避免长连接被主动断开
    }

    location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://server:3000;
        proxy_redirect off;
    }
}

3. 修正docker-compose.dev.yml的Nginx端口配置 #

原配置重复映射端口容易造成混淆，只需保留一个对外端口即可：

nginx:
  ports:
    - "8080:80" # 本地访问地址为 http://localhost:8080

4. 确认启动命令 #

必须同时加载基础配置和开发环境配置，否则挂载卷不生效会导致文件变更无法被监听：

docker-compose -f docker-compose.yml -f docker-compose.dev.yml up --build

5. 常见排查点 #

• 打开浏览器控制台，查看是否有websocket连接失败的报错，若有则调整vue.config.js中webSocketURL的域名、端口与你实际访问的地址保持一致
• 确认Vue项目的package.json中serve命令没有添加--no-hot参数关闭热重载
• Windows/macOS环境下已经配置CHOKIDAR_USEPOLLING=true，无需额外调整文件监听规则

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