快速开始

Electron 项目可以手动搭建，也可以直接使用 electron-vite。如果项目本身已经使用 Vite，优先用 electron-vite，目录和构建流程更清晰。

创建项目

pnpm create @quick-start/electron

按提示选择前端框架和 TypeScript。

常见脚本：

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

推荐目录

src/
├── main/
│   └── index.ts
├── preload/
│   └── index.ts
└── renderer/
    ├── index.html
    └── src/
        └── main.ts

主进程入口

import { app, BrowserWindow } from 'electron'
import { join } from 'node:path'

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      contextIsolation: true,
      nodeIntegration: false,
      sandbox: true,
    },
  })

  if (process.env.ELECTRON_RENDERER_URL) {
    void win.loadURL(process.env.ELECTRON_RENDERER_URL)
  } else {
    void win.loadFile(join(__dirname, '../renderer/index.html'))
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

开发流程

pnpm dev

开发阶段通常同时启动：

• 渲染进程开发服务器。
• 主进程编译监听。
• Electron 应用窗口。

构建流程

pnpm build

electron-vite build 通常只负责构建主进程、预加载脚本和渲染进程产物。生成平台安装包还需要 electron-builder 或其他打包工具。

基本原则

• 主进程只放桌面能力、窗口管理和系统资源访问。
• 渲染进程只做 UI，不直接访问 Node.js 能力。
• preload 只暴露最小 API，不暴露 ipcRenderer 本身。
• 所有跨进程输入都要校验，不信任渲染进程传来的参数。