Windows环境下React项目修改代码后无自动刷新问题求助

问题背景 #

全新创建的Vite React项目，修改App.js或index.js后无热更新反应，必须重启npm run dev才能看到变更；但修改index.html后刷新页面可正常更新。已尝试设置FAST_REFRESH环境变量、安装第三方刷新包、更换项目目录等操作，均无效。该项目在WSL/Ubuntu环境下可正常运行，仅Windows本地环境存在问题。

针对性解决步骤 #

1. 修正Windows环境下的环境变量写法 #

Windows不支持Linux风格的VAR=value command变量设置方式，之前的脚本写法无效，需调整：

• 方案一：使用cross-env跨平台设置环境变量
  先安装依赖：

  npm install cross-env --save-dev
  

  修改package.json的dev脚本：

  "scripts": {
    "dev": "cross-env FAST_REFRESH=true vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
  

• 方案二：直接使用Windows原生set命令
  修改dev脚本为：

  "scripts": {
    "dev": "set FAST_REFRESH=true && vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
  

2. 确认Vite React插件配置正确 #

检查vite.config.ts或vite.config.js，确保@vitejs/plugin-react已正确引入并启用：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

注：@vitejs/plugin-react v2.x版本默认启用Fast Refresh，无需额外配置，若存在自定义配置，确保未禁用热刷新功能。

3. 排查文件系统相关问题 #

• 确保项目目录路径无中文、空格或特殊字符，Vite在Windows下对特殊路径的文件监听可能出现异常；
• 尝试以管理员身份运行终端，避免文件权限不足导致Vite无法监听文件变更。

4. 临时关闭Windows Defender实时保护（测试用） #

Windows Defender的实时扫描可能干扰Vite的文件监听机制，临时关闭后测试热更新是否恢复。若有效，可将项目目录添加到Defender的排除列表，避免后续干扰。

5. 更新Vite及相关插件版本 #

当前使用的Vite 3.1.0和@vitejs/plugin-react 2.1.0可能存在Windows环境下的兼容问题，尝试更新到最新稳定版本：

npm update vite @vitejs/plugin-react

6. 检查终端环境 #

确保使用Windows原生的PowerShell或CMD运行项目，避免Git Bash等终端的环境变量差异导致问题；若之前用了WSL终端，切换回Windows本地终端测试。

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