Electron Vite - Electron 构建工具指南

electron-vite 是一个构建工具，旨在为 Electron 提供更快、更精简的开发体验。它基于 Vite 构建，为 main process、renderer processes 和 preload scripts 提供统一配置和优化的开发体验。

功能特性

特性	说明
Vite 构建	基于 Vite 构建命令，快速开发体验
统一配置	为 main、renderer 和 preload 提供单一配置点
HMR	Renderer process 支持即时模块热替换
热重载	Main process 和 preload scripts 支持热重载
多线程	通过简单导入后缀支持
资源优化	针对主进程的优化处理
隔离构建	增强沙盒支持
源码保护	V8 字节码编译

安装

前置要求

Node.js：版本 20.19+, 22.12+
Vite：版本 5.0+

命令行使用

bash

# 直接使用
electron-vite

# 或使用 npx
npx electron-vite

package.json 示例：

json

{
  "scripts": {
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "prebuild": "electron-vite build"
  }
}

配置

配置文件名为 electron.vite.config.js，放在项目根目录：

javascript

export default {
  main: {
    // vite 配置选项
  },
  preload: {
    // vite 配置选项
  },
  renderer: {
    // vite 配置选项
  },
}

Electron 入口点

打包后，Electron 应用的入口点应更改为输出目录中的主进程入口文件。默认 outDir 是 out。

json

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "./out/main/index.js"
}

脚手架项目

使用 npm create

bash

# 选择包管理器：npm / yarn / pnpm
npm create @quick-start/electron@latest

# 按提示选择：
# ✔ Project name: … <electron-app>
# ✔ Select a framework: › vue
# ✔ Add TypeScript? … No / Yes

支持的模板

模板	TypeScript	GitHub
vanilla	vanilla / vanilla-ts	vanilla
vue	vue / vue-ts	vue
react	react / react-ts	react
svelte	svelte / svelte-ts	svelte
solid	solid / solid-ts	solid

直接指定模板

bash

npm create @quick-start/electron@latest my-app -- --template vue-ts

克隆模板

bash

npx degit alex8088/electron-vite-boilerplate electron-app
cd electron-app
npm install
npm run dev

核心优势

快速开发：基于 Vite 的极速开发体验
统一配置：单一配置点管理所有进程
热更新：支持 HMR 和热重载
高级特性：多线程、资源优化、源码保护
开箱即用：为 Electron 优化的默认配置
多种模板：支持主流前端框架

字节笔记本

Electron Vite - Electron 构建工具指南

功能特性

安装

前置要求

命令行使用

配置

Electron 入口点

脚手架项目

使用 npm create

支持的模板

直接指定模板

克隆模板

核心优势

相关链接