Electron 官方没有限定构建工具，但 Vite 凭借极快的冷启动和热更新能力，已经成为社区公认的最佳搭档。用 Vite 开发 Electron，你不需要自己从零拼凑配置，直接使用现有的集成方案就能在几分钟内搭建起一个开发现代、调试流畅的项目骨架。
2.1.1 为什么选 Vite
传统 Webpack 构建 Electron 渲染进程时，随着项目体积增长，冷启动时间会明显变长，热更新也可能出现卡顿。Vite 基于原生 ES 模块的按需编译机制，让渲染进程的开发服务器几乎能达到“秒开”的效果。对于 Electron 这种需要频繁刷新窗口来查看界面改动的场景，体验提升非常直接。
另一个好处是，Vite 的配置心智负担很低。你不需要分别维护一个复杂的 webpack 主进程配置和渲染进程配置，很多集成工具已经帮你处理好了双进程的构建与开发流程，你只需关注业务代码。
2.1.2 推荐模板：electron-vite
社区里最常见的方案是 electron-vite，它是一个专门为 Electron 设计的构建工具，内部同时管理主进程、预加载脚本和渲染进程的 Vite 配置。你可以通过官方脚手架快速创建一个开箱即用的项目：
npm create @quick-start/electron my-app -- --template vue这条命令会创建一个名为 my-app 的项目，并集成 Vue 框架。替换 vue 为 react、svelte 或 vanilla 可以选择不同前端栈。创建完成后，目录结构大致如下：
my-app/
├── electron.vite.config.mjs # 统一的 Vite 配置
├── package.json
├── src/
│ ├── main/ # 主进程代码
│ │ └── index.js
│ ├── preload/ # 预加载脚本
│ │ └── index.js
│ └── renderer/ # 渲染进程（前端项目）
│ ├── index.html
│ └── src/
│ ├── App.vue
│ └── main.js这种目录划分非常清晰：main、preload、renderer 三个目录对应 Electron 的三个独立运行环境，每个环境都可以拥有自己的 Vite 构建配置，互不干扰。
2.1.3 开发与调试体验
使用这个模板，你只需要执行：
npm run dev它会同时启动三件事：
- 用 Vite 构建并监听主进程代码，有变动时自动重启 Electron 应用。
- 用 Vite 构建预加载脚本，更新时同样重启应用。
- 启动一个 Vite 开发服务器为渲染进程提供热更新支持——你修改 Vue 组件或 CSS，窗口内容会立刻刷新，不需要重启整个应用。
这种热更新机制让你几乎在“所见即所得”的环境下开发桌面应用。调试主进程时，你可以使用 --inspect 标志并通过 Chrome DevTools 或 VS Code 的连接调试功能打断点，调试体验和前端几乎一样。
2.1.4 自定义与扩展
electron-vite 的配置文件 electron.vite.config.mjs 集中管理了所有 Vite 选项，你可以轻松插入插件、设置别名、配置环境变量。例如，要渲染进程支持 @ 别名指向 src/renderer/src：
// electron.vite.config.mjs
import { defineConfig } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
main: {
// 主进程配置
},
preload: {
// 预加载配置
},
renderer: {
plugins: [vue()],
resolve: {
alias: {
'@': resolve('src/renderer/src')
}
}
}
})打包时，执行 npm run build 会根据目标平台输出可分发文件。默认集成 electron-builder，你可以在 package.json 的 build 字段里配置 Windows/macOS/Linux 的安装包细节，例如应用名称、图标、NSIS 选项等。
2.1.5 其他值得关注的方案
除了 electron-vite，还有 vite-plugin-electron，它作为 Vite 插件形式集成，适合已经有一个 Vite 前端项目、想快速加个 Electron 壳子的情况。它允许你在一个现有的 Vite 项目里直接配置 Electron 主进程入口，配置更轻量。但如果你是从零开始一个标准的 Electron 应用，electron-vite 的工程结构和双进程支持更完整，更推荐使用。
另一个选择是 electron-forge 配合 Vite 插件，但因社区生态和活跃度，electron-vite 目前是更主流、文档更友好的起点。
2.1.6 小结
用 Vite + Electron 的组合来启动一个新项目，你可以在 5 分钟内拥有一个带热更新、完整目录划分与构建配置的开发环境。之后的章节里，我们将基于这样的模板来实现具体的功能，你会看到这种工程结构如何让主进程、渲染进程之间的职责分离更加自然。