使用Vite+React构建Electron前端时HMR需两次保存才生效求助

以下是针对你遇到的「HMR检测到变更但浏览器不更新，第二次无修改保存才生效」问题的排查和解决步骤：

• 核对Vite与React插件配置
  确保@vitejs/plugin-react的快速刷新功能已正确启用，同时配置Vite dev server允许外部连接（适配Electron渲染进程的访问）：

  // vite.config.ts
  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [
      react({
        fastRefresh: true // 显式开启快速刷新，默认已开启但建议确认
      })
    ],
    server: {
      host: '0.0.0.0', // 允许外部访问（Electron渲染进程属于外部请求）
      port: 5173,
      strictPort: true,
      watch: {
        // 确保不忽略React组件文件
        ignored: ['!**/src/**/*.{tsx,jsx,ts,js}']
      }
    }
  })
  

• 排查Electron主进程的自定义重载逻辑
  很多Electron模板会添加主进程监听文件变更并手动重载窗口的代码，这会和Vite的HMR机制冲突，导致更新被拦截。检查主进程代码（比如main.js/main.ts），移除类似fs.watch或第三方监听工具的重载逻辑，让Vite单独处理渲染进程的热更新。

  同时确保Electron窗口的webPreferences配置遵循安全规范，避免Node环境干扰HMR连接：

  // 主进程创建窗口的代码
  const mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // 如需NodeAPI，通过preload脚本暴露
    }
  })
  
  // 加载Vite dev server的URL，而非本地文件
  mainWindow.loadURL('http://localhost:5173')
  

• 清除缓存并重启服务
  Vite的缓存目录有时会导致HMR异常，手动删除node_modules/.vite文件夹，然后重启Vite和Electron服务。同时在Electron窗口中按Ctrl+Shift+R强制刷新，清除内置Chrome的缓存。

• 检查HMR连接状态
  打开Electron窗口的开发者工具（Ctrl+Shift+I），切换到Console标签，查看是否有[vite] connected的日志。如果出现连接失败、WebSocket错误等信息，需要确认端口5173未被占用，或者本地防火墙没有拦截Vite的dev server请求。

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