你可能已经知道了——Electron 让你用 HTML + CSS + JavaScript 写桌面应用。但知道和上手之间，隔着一堆实际的问题：到底选哪个脚手架？React 和 Electron 怎么通信？Vue 的响应式在桌面端有什么坑？打包之后慢不慢？
2026年的Electron：为啥还有人在用
开始集成之前，想先回答一个基础问题：为什么在 Tauri、Flutter Desktop 这些新框架层出不穷的 2026 年，Electron 依然是桌面应用开发的首选？
答案就是——生态。
VS Code、Slack、Discord、Figma、Notion、WhatsApp 桌面版、Obsidian——这些你天天在用的应用全是 Electron 做的。它们证明了 Electron 能撑住亿级用户的产品。你需要什么原生功能——文件系统、系统托盘、剪贴板、自动更新、菜单栏、快捷键——在 Electron 生态里都有现成的方案。
2026 年的 Electron 34.x 已经升级到 Chromium 132 + Node.js 22，进程沙箱更强，基础内存比 32 版降了 8%。虽然它依然随身携带一个完整的 Chrome 浏览器（应用最小编译包 80 MB+），但对很多团队来说，生态成熟度带来的确定性比省下那 100 MB 更值钱。
推荐的技术栈组合
先说结论：Electron Forge + Vite + 你选的前端框架，这是目前最推荐的方案。
过去几年 Electron 的工程化变化挺大的。曾经大家用 Webpack + electron-builder 手动搭，或者用 `electron-react-boilerplate` 这样的社区模板。但 2026 年这些方案已经不是最优解了。
为什么是 Electron Forge？
Electron Forge 是 Electron 官方出品的打包与发布工具链，已经替代了之前分散的 electron-builder、electron-packager 等工具。它提供了从开发到发布的完整管线——项目脚手架、热重载、打包、代码签名、自动更新——一体搞定。
为什么是 Vite？
Vite 在 2026 年已经是前端构建工具的默认选择了。通过 `electron-vite` 这个包，Vite 可以直接用于 Electron 的主进程和渲染进程构建，享受它的极速 HMR 和 esbuild 预构建。
对比传统方案（Webpack），开发体验的差距肉眼可见：
– 冷启动从十几秒降到一两秒
– HMR 几乎即时响应
– 主进程修改也能热重载
React vs Vue 怎么选？
理论上 Electron 支持任何前端框架，但实践中主流的几乎就是 React 和 Vue：
React + Electron
– VS Code 用这个组合，生态最成熟
– 在做编辑器、数据面板这类复杂交互的应用时，React 的组件模型更适合
– React DevTools 和 Electron DevTools 配合得很好
Vue 3 + Electron
– Vue 3 的 Composition API + `<script setup>` 写起来很舒服
– 如果要兼顾 Web 版和桌面版，Vue 更容易做一份代码两处跑
– `electron-vite-vue` 这个模板非常成熟，开箱即用
React + Electron 脚手架搭建
基于 2026 年的最佳实践，推荐这样初始化：
```bash
# 1. 用 Electron Forge 创建项目
npm init electron-app@latest my-app -- --template=vite
# 2. 装上 React
cd my-app
npm install react react-dom
# 3. 配置 Vite 的 React 插件
npm install --save-dev @vitejs/plugin-react
```然后在 `vite.renderer.config.mjs` 里加上 React 插件：
```js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});
```这样就完了？对，2026 年的 Electron + React 脚手架就是这么简单。Forge 的新版本已经内置了主进程和渲染进程的 Vite 分离配置，你只需要加前端框架的插件。
有没有更快的办法？
不想手动搞这些的话，直接用 `electron-vite` 的官方模板：
```bash
npm create @electron-vite@latest
```它支持 React / Vue / Svelte / Solid 四种前端选项，选 React 后直接 `npm run dev` 就行了。
Vue 3 + Electron 脚手架搭建
Vue 3 的集成方式和 React 类似，区别主要是插件和模板：
```bash
# Electron Forge 创建
npm init electron-app@latest my-vue-app -- --template=vite
# 装 Vue 3
cd my-vue-app
npm install vue
# 装 Vite 的 Vue 插件
npm install --save-dev @vitejs/plugin-vue
```在 `vite.renderer.config.mjs` 里配置：
```js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
```用 `electron-vite` 的 Vue 模板更直接：
```bash
npm create @electron-vite@latest
# 选 Vue 模板
```
还有一个社区维护的模板 `electron-vite-vue`：
```bash
npm create @quick-start/electron@latest
```选 Vue 就行了。这个模板按主进程、渲染进程、预加载脚本三个目录组织，结构很清晰，推荐新手直接拿来入门。
开发中绕不开的几个坑
1. 进程通信：IPC 的正确姿势
Electron 有两个进程：主进程（Node.js 环境）和渲染进程（浏览器环境）。它们之间通过 IPC（Inter-Process Communication）通信。
新手常犯的错误是直接在渲染进程里调 `fs.readFileSync` 或者 `process.env`。Electron 默认开了 `contextIsolation`，渲染进程已经访问不了 Node.js API 了。所以必须走 IPC：
主进程（main.js）：
```js
const { ipcMain } = require('electron');
ipcMain.handle('read-file', async (event, filePath) => {
const fs = require('fs');
return fs.readFileSync(filePath, 'utf-8');
});
```预加载脚本（preload.js）：
```js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
readFile: (path) => ipcRenderer.invoke('read-file', path),
});
```React 组件里调用：
```jsx
const data = await window.electronAPI.readFile('/path/to/file');
```这是 2026 年 Electron 开发的标准模式。`contextBridge` + `ipcRenderer.invoke` 确保了进程安全和内存管理正确。
2. 热重载的几个细节
Vite 的热重载默认只在渲染进程工作。也就是说你改了 React 组件的样式，浏览器实时更新了，但改主进程代码不会自动重启。
`electron-vite` 解决了这个问题：修改主进程代码时，它会自动杀掉 Electron 进程然后重启。实际开发体验接近全栈 HMR。
如果用 Electron Forge + Vite 套装，需要在 `package.json` 的 forge 配置里开启主进程的 watch 模式：
```json
{
"config": {
"forge": {
"packagerConfig": {},
"plugins": [{
"name": "@electron-forge/plugin-vite",
"config": {
"build": [
{ "entry": "src/main.js", "config": "vite.main.config.mjs" },
{ "entry": "src/preload.js", "config": "vite.preload.config.mjs" }
],
"renderer": [
{ "name": "main_window", "config": "vite.renderer.config.mjs" }
]
}
}]
}
}
}
```3. 打包和体积控制
一个 React + Electron 的桌面应用最小发布包大约 80-120 MB。觉得太大？有几个实际优化手段：
– ASAR 打包：Electron 默认把你的代码打包成 ASAR 归档，文件系统操作更快，体积也小一点
– 关掉不必要的 Chromium 功能：通过 `–disable-features` 命令行参数去掉你用不到的
– 管好 Node 原生模块：只用你需要的，不装多余的
– 代码分割：用 React.lazy + Suspense 分割渲染进程代码
另外注意：`node_modules` 里的大头一般不是你自己的代码。一个中等复杂度的应用，React + 几个 UI 库 + 状态管理就占了很大一部分。
4. 安全基线配置
2026 年的 Electron 默认安全配置已经好多了，但有些东西你得亲自检查：
```js
new BrowserWindow({
webPreferences: {
contextIsolation: true, // 默认开启，保持
nodeIntegration: false, // 关掉！永远不要打开
sandbox: true, // 渲染进程沙箱
preload: path.join(__dirname, 'preload.js'),
webSecurity: true,
},
});
````nodeIntegration: false` 这条红线不能碰。一旦开启，你的 Web UI 代码就能直接调用 Node.js 的所有能力——一个 XSS 漏洞就等于服务器被攻陷。
2026 年的新变化
electron-vite v5
electron-vite 在 2026 年更新到了 v5，带来了几个重要的改进：
– 主进程代码修改后重建速度大幅提升
– Source Code Protection（源代码保护），编译时混淆关键逻辑
– 改进了项目模板的 TypeScript 支持
Electron 34.x 的 ContextBridge 增强
Electron 34 加强了 `contextBridge` 的安全性，限制了预加载脚本中可以暴露的 API 类型。以前可以直接暴露一个对象引用，现在推荐只暴露函数调用，减少渲染进程对主进程对象的引用。
自动更新的新方案
`electron-updater` 不再是最主流的选择。越来越多项目转向 Electron Forge 自带的 `@electron-forge/plugin-auto-update`，因为和打包管线集成更紧密，对常见的更新服务器（S3、GitHub Releases、自定义服务器）支持更好。
选 Electron 还是 Electron + Tauri 混合？
2026 年冒出来的一个新趋势是混合架构：用 Electron 做 UI 层，用 Tauri 的 Rust 后端处理高性能计算或安全敏感操作，通过本地 Socket 或 WebSocket 通信，以这种形式做桌面应用。
听起来挺酷，但现实是你的团队大概率没人力同时维护两套技术栈。除非项目对性能有极致要求（比如视频处理、大规模数据可视化），否则建议老老实实选一条路线走到底。
总结
Electron + React/Vue构建的桌面应用在2026年的开发体验已经相当成熟了：
1. 脚手架首推 Electron Forge + Vite + `@vitejs/plugin-react` 或 `@vitejs/plugin-vue`
2. IPC 通信用 `contextBridge` + `ipcRenderer.invoke` 模式
3. 安全确保 `nodeIntegration: false`、`contextIsolation: true`、`sandbox: true`
4. 热重载用 `electron-vite` 获得主进程 + 渲染进程双热更新
5. 自动更新建议迁移到 Forge 的官方 plugin-auto-update
Electron桌面应用在2026 年就像一个老朋友——你不一定喜欢它的所有缺点（特别是那个不环保的体积和内存），但你知道它能可靠地帮你搞定工作。
—
📖 推荐阅读
也看看这些跟前端工程师以及AI有关的文章，你可能会感兴趣：
React Compiler 1.0 来了：以后useMemo 和 useCallback 可以删了？
React 19 与 Vue 3.6：同一个2026年，两种不同的前端哲学