Laravel Sail(WSL+Windows)环境npm run dev无法自动更新Vue文件

问题场景 #

• 环境配置：Windows系统 + WSL Ubuntu + Laravel 11 + Inertia + Vue3，通过Laravel Sail启动服务（可在Docker Desktop中查看状态）
• 异常表现：生产环境执行npm run build部署正常，但开发环境npm run dev热更新失效，不同终端运行结果不同：
  • WSL Ubuntu终端：服务启动在5173端口，但修改*.vue等前端文件后无自动热更新，必须重启服务才生效
  • Docker应用终端：同WSL终端表现，无热更新，需重启服务
  • Windows CMD终端：服务运行正常，修改*.vue文件后浏览器自动刷新
• 附加现象：Vue代码在Windows主机的VSCode中编辑，WSL和Docker终端启动Vite的速度比Windows CMD慢约3倍

问题根源 #

当直接在Windows系统打开VSCode（即使代码文件存储在WSL文件系统）时，WSL2无法可靠识别Windows进程触发的文件修改操作，导致Vite无法追踪到文件变更，最终引发热更新不稳定。核心矛盾是代码编辑器与npm运行环境分属不同文件系统：VSCode在Windows文件系统侧运行，而WSL/Docker终端的npm在Linux文件系统侧，跨系统的文件变更检测存在兼容性缺陷。

解决方案 #

保证代码编辑器与npm run dev运行在同一文件系统环境：

• 使用Windows CMD终端执行npm run dev，此时VSCode（Windows侧）与npm运行环境均处于Windows文件系统，Vite可正常追踪*.vue文件的变更，热更新功能恢复正常。

内容的提问来源于stack exchange，提问作者JI-Web