VSCode+Docker开发HMR失效：修改前端*.vue文件无实时效果

核心原因 #

1. 热更新资源路径不匹配：容器内webpack-dev-server生成的热更新文件路径与浏览器请求路径不一致，导致404。webpack默认的publicPath配置未适配Docker环境，使得热更新的.hot-update.json文件请求地址错误。
2. 文件系统事件未传递：Docker在Windows/macOS环境下，宿主机的文件变更事件无法通过inotify传递到容器内的Node进程，webpack无法自动检测到.vue文件修改，也就不会生成新的热更新文件。
3. 前端开发服务配置受限：webpack-dev-server的host未设置为0.0.0.0，导致容器外的浏览器无法访问热更新接口；或者端口映射、卷挂载配置存在疏漏，使得热更新资源无法被正确访问。

解决方法 #

• 调整webpack publicPath配置：在wiki/client目录的开发环境webpack配置文件（如webpack.dev.js）中，将publicPath设置为"/_assets/"，确保热更新文件的请求路径与服务器响应路径一致。
• 启用文件轮询监听：启动Docker容器时添加环境变量CHOKIDAR_USEPOLLING=true，让webpack通过轮询方式检测文件变化，绕过Docker的文件系统事件限制。例如在docker-compose.yml中添加：

  environment:
    - CHOKIDAR_USEPOLLING=true
  

• 修复devServer网络配置：在webpack配置的devServer段中，设置host: "0.0.0.0"，允许容器外部访问热更新服务；同时确认容器端口映射正确（宿主机3000端口对应容器内前端开发服务端口）。
• 验证卷挂载同步：检查docker-compose.yml中wiki/client目录的挂载规则，确保宿主机文件修改能实时同步到容器内的对应路径，避免挂载路径错误导致文件更新失效。
• 重启前端开发服务：修改配置后，进入容器执行npm run dev:client重启前端开发服务，确保新配置生效。

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