zhaoweiguo 的知识库

electron-vite

3分钟阅读

一句话：基于 Vite 的 Electron 开发构建工具，一份配置统管 main/preload/renderer 三进程；支持源代码保护。5.5k stars，alex8088 主导。

定位

只管开发构建期（不管打包分发，产物交给 electron-builder 或 Forge）。解决 Electron 三入口（主进程/预加载/渲染进程）要配三套构建工具的痛点。

核心特性

  • 三进程统一配置：一份 electron.vite.config.ts，main / preload / renderer 三段，共享 resolve.alias 与环境变量（import.meta.env）
  • 渲染进程 HMR：标准 Vite 体验；主进程/preload 改动自动重启应用
  • preload 沙箱适配：检测到沙箱模式自动输出 CJS（沙箱下 preload 不支持 ESM）
  • 原生模块外部化：externalizeDepsPlugin() 自动 external，避免 Node 依赖被错误打包
  • @renderer 别名、__dirname 兼容等 Electron 特有问题内置处理
  • 源代码保护：可选混淆/加密

快速开始

npm create @quick-start/electron@latest my-app   # 官方脚手架（TS/React/Vue/Svelte 模板）
# 或手动集成
npm install electron-vite vite --save-dev

electron.vite.config.ts：

import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
 
export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: { alias: { '@': resolve('src/renderer/src') } },
    plugins: [react()]
  }
})

package.json：

{
  "main": "./out/main/index.js",
  "scripts": {
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "preview": "electron-vite preview"
  }
}

命令语义：

命令作用
electron-vite dev启动应用 + 渲染进程 HMR + 主进程改动自动重启
electron-vite build三进程产物输出到 out/{main,preload,renderer}
electron-vite preview用生产产物启动（发布前验证）

与打包工具的衔接

electron-vite 是上游，产物目录交给打包器：

源码 --electron-vite build--> out/（main/preload/renderer）
out/ --electron-builder--> dmg / exe / AppImage

electron-builder.yml 里 files: [out/**/*] 即完成对接；官方脚手架模板默认就是这套组合。

与 Forge plugin-vite 的区别

Forge 也有 plugin-vite（把 Vite 嵌入 Forge 流水线），差异：

维度electron-viteForge plugin-vite
独立性独立工具，配任意打包器绑定 Forge
配置electron.vite.config.ts 三段式融进 forge.config.js
生态专属模板/文档完善跟随 Forge 版本

相关

关系图谱

反向链接