Electron+Vite+Vue3项目实战：5分钟搞定IPC通信安全封装（附完整代码）

Electron+Vite+Vue3项目实战：5分钟搞定IPC通信安全封装（附完整代码）

在桌面应用开发领域，Electron凭借其跨平台特性和Web技术栈的亲和力，已成为构建现代桌面应用的首选方案。然而，随着应用复杂度提升，主进程与渲染进程间的通信（IPC）管理往往成为项目架构的痛点。本文将带你使用electron-vite-vue脚手架，快速构建符合Electron安全规范的IPC通信体系，解决"代码该放主进程还是渲染进程"的经典困惑。

1. 环境准备与项目初始化

首先确保系统已安装Node.js 18+版本，然后通过以下命令创建项目：

npm create @quick-start/electron@latest

在交互式命令行中选择：

• 项目名称：electron-ipc-demo
• 框架：vue
• TypeScript：Yes
• 其他选项保持默认

进入项目目录后，观察关键文件结构：

electron-ipc-demo/
├── electron/
│   ├── main/
│   │   └── index.ts    # 主进程入口
│   └── preload/
│       └── index.ts    # 预加载脚本
├── src/
│   ├── App.vue         # 渲染进程入口
│   └── types/
│       └── electron-api.d.ts  # 类型声明文件

提示：electron-vite-vue已默认配置好安全策略，包括contextIsolation: true和nodeIntegration: false，这是我们实现安全通信的基础。

2. IPC通信的三层安全架构

现代Electron应用推荐的安全通信模型包含三个关键层：

2.1 主进程IPC注册

在electron/main目录下新建ipcManager.ts：

import { ipcMain, dialog, shell } from 'electron'

type IpcHandler = {
  channel: string
  handler: (...args: any[]) => any
}

export const ipcHandlers: IpcHandler[] = [
  {
    channel: 'get-app-version',
    handler: () => process.env.npm_package_version
  },
  {
    channel: 'open-file-dialog',
    h