vite 默认不打包 electron 主进程代码，仅构建渲染层；需用 vite-plugin-electron 插件或手动配置 esbuild/tsc 实现主进程编译、热更新与调试，最终由 electron-builder 打包。
Vite 本身不直接打包 Electron 主进程，它只负责构建 Vue/React 等渲染层（即前端资源），主进程代码（如 main.js 或 electron/main.ts）默认不参与 Vite 的构建流程。要让主进程可打包、可调试、可热更新，需借助专用插件或手动配置。
主进程不被 Vite 构建的默认行为
Vite 的核心定位是前端构建工具，其 build 命令只处理 src/ 下的渲染进程代码，并输出到 dist/。而 Electron 主进程文件（例如根目录的 main.js 或 electron/main.ts）属于 Node.js 环境，语法可能含 CommonJS、动态 require、Electron API 等，Vite 默认跳过这类文件。
- 直接运行
vite build不会编译或转译main.js - 若主进程用了 ES 模块语法（如
import { app } from 'electron'），在 Node.js 中可能报错，除非明确指定"type": "module"并用.mjs后缀 - 开发时无法热重载主进程逻辑（比如改了窗口尺寸，必须重启整个 Electron 进程）
推荐方案：使用 vite-plugin-electron
这是目前最主流、维护活跃的集成方案（2026 年已稳定支持 Vite 5.x + Electron 22–32）。它让 Vite 同时接管主进程和预加载脚本（preload.js）的构建与开发服务。
- 安装：
pnpm add -D vite-plugin-electron（或 npm/yarn） - 在
vite.config.ts中启用：import electron from 'vite-plugin-electron'<br>export default defineConfig({<br> plugins: [<br> vue(),<br> electron([<br> { entry: 'electron/main.ts' }, // 主进程入口<br> { entry: 'electron/preload.ts' } // 预加载脚本入口<br> ])<br> ]<br>}) - 插件会自动：
- 用 esbuild 编译主进程代码（支持 TS、JSX、Node 内置模块解析）
- 生成
dist-electron/目录存放编译后的主进程文件 - 开发时启动双进程服务：Vite HMR 渲染进程 + Electron 主进程监听变更并热重启
替代方案：手动用 esbuild 或 tsc 单独构建
适合轻量项目或已有成熟 TS 构建链的团队。无需额外插件，但需自行管理构建命令和路径。
- 将主进程写成
electron/main.ts，用tsc编译为 JS： - 在
package.json中添加脚本："scripts": {<br> "build:main": "tsc --project electron/tsconfig.json",<br> "dev": "concurrently \"vite\" \"npm run build:main -- --watch\""<br>} - 确保
main.js加载的是编译后路径，例如：win.loadFile(path.join(__dirname, '../dist/index.html'))（注意目录层级）
打包阶段由 electron-builder 接管
无论主进程是否经 Vite 构建，最终生成安装包（.exe/.dmg/.deb）都由 electron-builder 完成：
- 它会把
dist/（渲染层）、dist-electron/（主进程）、node_modules（按需精简）一起打包进最终应用 - 通过
electron-builder.yml可精确控制哪些文件包含、图标路径、NSIS 安装选项等 - 关键配置项示例：
directories:<br> output: dist-electron<br>files:<br> - '!node_modules/**'<br> - 'dist/**'<br> - 'dist-electron/**'<br> - 'package.json'
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
