WSL环境下VSCode运行React项目保存代码后热更新不生效求助

数据老陈

2026-9-27

问题根因

你的热更新失效核心是WSL环境下的文件监听机制受存储路径影响导致的，和你修改的终端配置、项目代码配置都没有关系，具体解决方案按优先级排列：

【最优解】将项目从/mnt/c/Users/major/OneDrive/Documents/PENNY/penny-earned路径迁移到WSL原生Linux文件系统路径下，比如/home/[你的Ubuntu用户名]/projects/penny-earned路径。
原因：WSL挂载的Windows NTFS盘（/mnt/c/开头的路径）默认不会向Linux子系统传递文件系统inotify事件，webpack的热更新依赖inotify监听文件改动，自然无法触发重编译；同时OneDrive的实时同步逻辑会占用、锁定文件，进一步干扰变更事件的传递。迁移到原生Linux目录后重新执行npm install、npm run dev即可恢复热更新，同时项目编译速度也会大幅提升，你现在1分钟的编译耗时会缩短很多。

如果你必须将项目放在Windows盘符下，可修改webpack.config.js的devServer配置，开启轮询监听模式：

devServer: {
    contentBase: path.join(__dirname, 'public/'),
    port: 3000,
    publicPath: 'http://localhost:3000/dist/',
    hotOnly: true,
    historyApiFallback: true,
    // 新增以下两行配置
    watchOptions: {
        poll: 1000, // 每1000ms轮询一次文件变化
        aggregateTimeout: 300 // 检测到变化后延迟300ms再编译，避免频繁改动重复触发
    }
},

配置保存后重启dev服务即可生效，缺点是轮询会消耗部分性能，监听灵敏度比原生inotify低。

若以上操作后仍有问题，可调整WSL的inotify监听上限，避免因项目文件过多触发上限导致监听失效：
执行命令临时生效：
```
sudo sysctl fs.inotify.max_user_watches=524288
```
如需永久生效，将fs.inotify.max_user_watches=524288写入/etc/sysctl.conf文件，之后执行sudo sysctl -p加载配置即可。