Electron 怎么集成 React/Vue？安全配置和 IPC 通信详解

Electron 集成 Web 技术的本质就是：渲染进程跑 Web 应用，主进程提供 Node.js 能力，两者通过 IPC 通信。前端框架、UI 库、CSS 框架在渲染进程里照常使用——Electron 对它们来说就是一个浏览器窗口。

前端框架：照常用，注意路由模式

React、Vue、Angular 在 Electron 里和浏览器里写法完全一样。唯一需要注意的是路由模式：React Router / Vue Router 默认用 history 模式，但 Electron 加载本地文件时 URL 是 file:// 协议，history 模式会 404。解决方案：用 HashRouter（React）或 createWebHashHistory（Vue），或确保生产环境用 file:// 加载时配置 fallback。

更省心的方式是用 electron-vite 或 electron-forge 这些脚手架，它们把主进程、预加载脚本、渲染进程的构建都配好了——不用手动拼 Webpack/Vite 配置。

安全配置：三条铁律

所有集成的前提是安全配置正确。从 Electron 12 开始默认启用上下文隔离：

javascript
// main.js — 必须这么配
new BrowserWindow({
  webPreferences: {
    nodeIntegration: false,        // 禁止渲染进程直接用 Node
    contextIsolation: true,        // 隔离预加载脚本和渲染进程
    preload: path.join(__dirname, 'preload.js')  // 只通过 preload 暴露 API
  }
})

javascript
// preload.js — 用 contextBridge 暴露安全 API
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  readFile: (path) => ipcRenderer.invoke('fs:readFile', path),
  writeFile: (path, data) => ipcRenderer.invoke('fs:writeFile', path, data),
  onMenuAction: (callback) => ipcRenderer.on('menu:action', (_, data) => callback(data))
})

javascript
// renderer.js — 像用普通 API 一样调用
const content = await window.electronAPI.readFile('/path/to/file')

永远不要开 nodeIntegration——渲染进程加载的第三方脚本（广告、分析 SDK）会拿到完整的 Node.js 权限，等于把电脑控制权交出去。

IPC 通信：主进程和渲染进程的桥梁

渲染进程不能直接调 Node.js API，必须通过 IPC 中转：

• 渲染->主进程：ipcRenderer.invoke('channel', data) -> ipcMain.handle('channel', handler) — 请求-响应模式
• 主进程->渲染进程：mainWindow.webContents.send('channel', data) -> ipcRenderer.on('channel', callback) — 推送模式

常见场景：渲染进程需要读写文件（调 fs）、调系统对话框（调 dialog）、访问数据库——都走 IPC 让主进程执行，结果通过 Promise 返回。

UI 库和 CSS 框架：无脑用

Ant Design、Element Plus、Tailwind CSS、Material UI 在 Electron 里和浏览器里完全一样。Tailwind 特别适合 Electron 桌面应用——原子类让样式迭代快，打包时 tree-shake 掉没用到的类，体积可控。

一个常见坑：某些 UI 库的弹窗/抽屉用 document.body.appendChild 挂载，如果渲染进程的 DOM 结构被 Electron 的安全策略限制，可能出现弹窗定位异常。解法是在弹窗组件上指定 getPopupContainer 回当前容器而非 body。

构建工具：Vite 比 Webpack 快 10 倍

Vite 的 HMR 在 Electron 开发体验远超 Webpack——渲染进程改一行 CSS 几乎秒刷。主进程改代码需要重启 Electron，但 Vite 对渲染进程的加速足够弥补。

javascript
// vite.config.js — Electron 兼容配置
export default defineConfig({
  base: './',              // 相对路径，file:// 协议必须
  build: {
    outDir: 'dist',
    emptyOutDir: true
  },
  server: {
    port: 5173,
    strictPort: true       // 端口被占直接报错，不会自动换端口
  }
})

开发时主进程 mainWindow.loadURL('http://localhost:5173')，生产环境 mainWindow.loadFile('dist/index.html')。

追问

Electron 能用 Service Worker 吗？

技术上能，但没意义。Electron 应用本身就是"离线"的，不需要 SW 做缓存。而且 SW 在 file:// 协议下有限制。如果你需要离线数据缓存，用 IndexedDB 或 SQLite 直接存本地文件。

怎么在渲染进程里用 Node 模块？

不应该直接用。正确做法是：在 preload.js 里通过 contextBridge 暴露封装好的 API，主进程里用 Node 模块实现。如果非要绕过（不推荐），开 nodeIntegration: true——这等于放弃了安全隔离，只适合内部工具。

怎么同时调试主进程和渲染进程？

VS Code 的 launch.json 配两个 configuration：一个用 type: "node" 调试主进程，另一个用 Chrome DevTools 调试渲染进程。或者用 --remote-debugging-port=9222 启动 Electron，Chrome 访问 chrome://inspect 同时看两个进程。electron-devtools-installer 可以自动加载 React/Vue DevTools。