React开发服务器（Vite/CRA）不同步代码变更，求排查方案

安全阿岳

2026-7-20

React应用在WSL环境下热重载失效的解决办法

迁移项目到WSL内部文件系统
不要把项目放在Windows挂载目录（比如/mnt/c/），这类目录的文件系统通知机制和WSL不兼容，导致热重载工具无法捕获文件变更。把项目移到WSL内部路径，比如~/projects/，命令示例：
```
mv /mnt/c/your-react-project ~/projects/
```
提升inotify监听上限
WSL默认的文件监听数量可能不足，执行以下命令修改系统配置：
```
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
```
强制启用轮询模式
- Vite项目：在vite.config.js中添加监听配置
```
export default defineConfig({
  server: {
    watch: {
      usePolling: true,
    },
  },
})
```
- CRA项目：修改package.json的启动命令
```
"scripts": {
  "start": "CHOKIDAR_USEPOLLING=true react-scripts start"
}
```
轮询模式会主动检查文件变化，绕过WSL与Windows文件系统的通知兼容问题。
升级到WSL 2
检查当前WSL版本：
```
wsl --list --verbose
```
如果是WSL 1，执行以下命令升级（替换为你的发行版名称）：
```
wsl --set-version Ubuntu-22.04 2
```
WSL 2的文件系统性能和兼容性远优于WSL 1，能解决多数跨系统文件监听问题。