WEB前端 分类

理解 Electron 的进程模型是掌握 Electron 开发的核心。Electron 应用启动后，会同时存在 多个进程，每个进程各司其职，相互协作。

进程架构 💎

一个 Electron 应用主要由以下三类进程组成：

进程类型	数量	运行环境	主要职责
主进程	1 个	Node.js	应用生命周期、窗口管理、原生 API 调用
预加载脚本	多个	Node.js + Chromium	在渲染进程加载前运行，桥接主进程与渲染进程
渲染进程	多个	Chromium	展示 Web 页面，处理用户交互

刘春龙原创2026/9/9...大约 6 分钟

进程间通信IPC

由于主进程与渲染进程是相互隔离的，它们之间的所有数据交换都必须通过 IPC（Inter-Process Communication，进程间通信） 完成。掌握 IPC 是 Electron 开发的必备技能。

IPC 通信模式 💎

Electron 提供了三种主要的 IPC 通信模式：

模式	API	通信方向	是否需要返回值
单向发送	`ipcRenderer.send` + `ipcMain.on`	渲染进程 → 主进程	否
双向调用	`ipcRenderer.invoke` + `ipcMain.handle`	渲染进程 → 主进程	是（Promise）
主动推送	`webContents.send` + `ipcRenderer.on`	主进程 → 渲染进程	否

刘春龙原创2026/9/9...大约 6 分钟

窗口管理

窗口是 Electron 应用的"门面"，所有的 UI 交互都发生在窗口中。本章我们系统学习窗口的创建、配置、生命周期以及多窗口管理。

创建窗口 💎

通过 BrowserWindow 类可以创建一个应用窗口：

import { BrowserWindow } from 'electron'
import { join } from 'path'

const win = new BrowserWindow({
  width: 1024,
  height: 768,
  // ... 其它配置
})

刘春龙原创2026/9/9...大约 7 分钟

系统菜单与托盘

系统菜单和系统托盘是桌面应用区别于 Web 应用的重要特性。本章我们学习如何为 Electron 应用添加原生菜单与托盘图标。

应用菜单 💎

应用菜单通常显示在窗口顶部（Windows / Linux）或屏幕顶部（macOS），是桌面应用的重要入口。

创建自定义菜单 💎

// src/main/menu.ts
import { Menu, MenuItemConstructorOptions, app, shell } from 'electron'

export function createApplicationMenu(): void {
  const isMac = process.platform === 'darwin'

  const template: MenuItemConstructorOptions[] = [
    // macOS 上应用菜单的第一个菜单是应用名
    ...(isMac
      ? [
          {
            label: app.name,
            submenu: [
              { role: 'about', label: '关于' },
              { type: 'separator' },
              { role: 'services', label: '服务' },
              { type: 'separator' },
              { role: 'hide', label: '隐藏' },
              { role: 'hideOthers', label: '隐藏其他' },
              { role: 'unhide', label: '显示全部' },
              { type: 'separator' },
              { role: 'quit', label: '退出' },
            ],
          },
        ]
      : []),

    // 文件菜单
    {
      label: '文件',
      submenu: [
        {
          label: '新建',
          accelerator: 'CmdOrCtrl+N',
          click: (menuItem, browserWindow) => {
            // 通过 webContents 通知渲染进程
            browserWindow?.webContents.send('menu:new-file')
          },
        },
        {
          label: '打开',
          accelerator: 'CmdOrCtrl+O',
          click: (_, browserWindow) => {
            browserWindow?.webContents.send('menu:open-file')
          },
        },
        { type: 'separator' },
        isMac ? { role: 'close', label: '关闭窗口' } : { role: 'quit', label: '退出' },
      ],
    },

    // 编辑菜单
    {
      label: '编辑',
      submenu: [
        { role: 'undo', label: '撤销' },
        { role: 'redo', label: '重做' },
        { type: 'separator' },
        { role: 'cut', label: '剪切' },
        { role: 'copy', label: '复制' },
        { role: 'paste', label: '粘贴' },
        { role: 'selectAll', label: '全选' },
      ],
    },

    // 视图菜单
    {
      label: '视图',
      submenu: [
        { role: 'reload', label: '重新加载' },
        { role: 'forceReload', label: '强制重新加载' },
        { role: 'toggleDevTools', label: '开发者工具' },
        { type: 'separator' },
        { role: 'resetZoom', label: '实际大小' },
        { role: 'zoomIn', label: '放大' },
        { role: 'zoomOut', label: '缩小' },
        { type: 'separator' },
        { role: 'togglefullscreen', label: '全屏' },
      ],
    },

    // 窗口菜单
    {
      label: '窗口',
      submenu: [
        { role: 'minimize', label: '最小化' },
        { role: 'zoom', label: '缩放' },
        ...(isMac
          ? [
              { type: 'separator' },
              { role: 'front', label: '前置所有窗口' },
            ]
          : [{ role: 'close', label: '关闭' }]),
      ],
    },

    // 帮助菜单
    {
      label: '帮助',
      submenu: [
        {
          label: '访问官网',
          click: async () => {
            await shell.openExternal('https://www.electronjs.org/')
          },
        },
        {
          label: '关于',
          click: () => {
            // 弹出关于对话框
          },
        },
      ],
    },
  ]

  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

刘春龙原创2026/9/9...大约 6 分钟

本地数据存储

桌面应用与 Web 应用最大的区别之一就是：可以持久化存储大量数据。本章我们系统学习 Electron 中常用的本地存储方案。

存储方案对比 💎

方案	适用场景	容量	性能	易用性
electron-store	应用配置、用户偏好	几 MB	高	⭐⭐⭐⭐⭐
localStorage	简单数据	~10MB	高	⭐⭐⭐⭐⭐
IndexedDB	结构化数据	几百 MB	中	⭐⭐⭐
SQLite (better-sqlite3)	大数据、复杂查询	几 GB	高	⭐⭐⭐
文件系统 (fs)	文件、图片、缓存	无限制	取决于硬盘	⭐⭐

刘春龙原创2026/9/9...大约 7 分钟

打包与发布

开发完成后，需要把 Electron 应用打包成可分发的安装包。本章我们学习使用 electron-builder（electron-vite 脚手架默认集成）进行打包与发布。

electron-builder 简介 💎

electron-builder 是 Electron 生态最流行的打包工具，支持：

多平台打包：Windows、macOS、Linux
多种安装包格式：exe、msi、dmg、pkg、AppImage、deb、rpm、snap
自动签名（Windows / macOS）
自动更新
多语言安装包
资源压缩

刘春龙原创2026/9/9...大约 7 分钟

配置文件详解

Vite 的配置文件 vite.config.ts（或 vite.config.js）是项目的"控制中心"，所有构建行为都可以在这里自定义。本章我们系统学习配置文件的每一个常用选项。

配置文件基础 💎

文件类型 💎

Vite 支持 TypeScript 与 JavaScript 两种配置方式：

为什么推荐 TypeScript？

完整的类型提示
编辑器自动补全
重构更安全
Vite 本身使用 TypeScript 开发，与 TypeScript 配合最默契

刘春龙原创2026/9/9...大约 6 分钟

环境变量与模式

在实际项目中，不同环境（开发、测试、生产）通常需要不同的配置：API 地址、密钥、是否开启调试等。Vite 内置了完善的环境变量与模式管理机制。

环境变量分类 💎

Vite 项目中通常有三类环境变量：

类型	来源	访问方式
process.env	Node.js 原生环境变量	配置文件 / 构建脚本
Vite 内置变量	Vite 默认提供的变量	配置文件 / 客户端代码
自定义变量	项目根目录 `.env.*` 文件	以 `VITE_` 开头的可在客户端访问

刘春龙原创2026/9/9...大约 6 分钟

静态资源处理

Vite 对静态资源（图片、字体、视频、音频等）有非常完善的支持。本章我们系统学习 Vite 的静态资源处理方式。

资源处理方式 💎

Vite 中处理静态资源主要有以下几种方式：

方式	适用场景	特点
`import` 导入	JS / TS 中使用	获得 URL 或原始数据
`public/` 目录	不需要处理的静态文件	原样拷贝到产物目录
CSS 中的 `url()`	CSS 文件中引用	自动处理 hash
`<img src>` 字符串路径	模板中引用	需要放 public 目录

刘春龙原创2026/9/9...大约 6 分钟

CSS预处理器与PostCSS

Vite 原生支持 SCSS / Less / Stylus 等主流 CSS 预处理器，无需额外配置即可直接使用。本章我们学习如何与 PostCSS 协同工作，打造一个强大的 CSS 工程化方案。

一、原生支持 💎

Vite 内置了对以下预处理器的支持（仅需安装对应编译器）：

预处理器	编译器	安装命令
SCSS / Sass	`sass`	`pnpm add -D sass`
Less	`less`	`pnpm add -D less`
Stylus	`stylus`	`pnpm add -D stylus`
PostCSS	`postcss`	`pnpm add -D postcss`

刘春龙原创2026/9/9...大约 5 分钟