Electron + Vite + Vue 项目中的 IPC 通信三层封装实践

Electron + Vite + Vue 项目中的 IPC 通信三层封装实践

electron-vite-vue 是一个由社区维护的轻量级脚手架项目，集成了：

• ⚡ Vite：快速现代的构建工具
• 🧩 Vue 3：默认的前端 UI 框架
• 🖥️ Electron：跨平台桌面应用运行时

它帮助开发者快速搭建出具有前后端隔离、热更新、预加载脚本支持的 Electron 桌面应用开发环境，适合个人工具、跨平台客户端、管理后台等场景。

---

在这个基础上，我们希望进一步规范主进程与渲染进程之间的通信逻辑，封装一套结构清晰的 IPC 模块，以便项目功能增长时也能保持良好的可维护性。

本文将介绍如何实现这一目标，包括：

• 主进程逻辑统一注册
• Preload 中安全暴露 API
• 渲染进程中统一调用

---

📦 项目结构示意

electron-vite-vue/
├── electron/
│   ├── main/
│   │   └── ipcHandlers.ts     ← 主进程统一注册 IPC
│   └── preload/
│       └── index.ts           ← contextBridge 暴露 API
├── src/
│   ├── App.vue
│   ├── main.ts
│   └── types/
│       └── electron-api.d.ts  ← 类型提示（可选）

---

🧠 目标通信结构

渲染进程 → Preload 暴露 API → 主进程处理逻辑 → 返回数据或执行动作

---

🧱 1. 主进程封装：ipcHandlers.ts

// electron/main/ipcHandlers.ts
import { app, ipcMain, BrowserWindow, dialog, shell } from 'electron'export function setupIpcHandlers(win: BrowserWindow) {ipcMain.handle('get-app-version', () => {return app.getVersion()})ipcMain.handle('select-file', async () => {return await dialog.showOpenDialog({ properties: ['openFile'] })})ipcMain.on('window-minimize', () => win.minimize())ipcMain.on('open-external', (_, url) => {shell.openExternal(url)})
}

然后在主进程入口（如 electron/main/index.ts）注册：

import { setupIpcHandlers } from './ipcHandlers'// 创建窗口后调用
setupIpcHandlers(win)

---

🛡️ 2. Preload 层暴露：preload/index.ts

// electron/preload/index.ts
import { contextBridge, ipcRenderer } from 'electron'contextBridge.exposeInMainWorld('electronAPI', {getAppVersion: () => ipcRenderer.invoke('get-app-version'),selectFile: () => ipcRenderer.invoke('select-file'),minimizeWindow: () => ipcRenderer.send('window-minimize'),openExternal: (url: string) => ipcRenderer.send('open-external', url),onNavigate: (callback: (path: string) => void) => {ipcRenderer.on('navigate-to', (_, path) => callback(path))}
})

---

💻 3. 渲染进程使用示例：App.vue

<script setup lang="ts">
const checkVersion = async () => {const version = await window.electronAPI.getAppVersion()console.log('当前版本:', version)
}const selectAndLogFile = async () => {const result = await window.electronAPI.selectFile()if (!result.canceled && result.filePaths.length > 0) {console.log('文件路径:', result.filePaths[0])}
}const openGitHub = () => {window.electronAPI.openExternal('https://github.com/electron-vite/electron-vite-vue')
}
</script><template><button @click="checkVersion">获取版本</button><button @click="selectAndLogFile">选择文件</button><button @click="openGitHub">打开 GitHub</button>
</template>

---

💡 4. 类型提示增强（可选）：electron-api.d.ts

// src/types/electron-api.d.ts
export interface ElectronAPI {getAppVersion(): Promise<string>selectFile(): Promise<{ canceled: boolean, filePaths: string[] }>minimizeWindow(): voidopenExternal(url: string): voidonNavigate(cb: (path: string) => void): void
}declare global {interface Window {electronAPI: ElectronAPI}
}

并在 tsconfig.json 中添加类型目录：

{"compilerOptions": {"types": ["vite/client", "./src/types/electron-api"]}
}

---

🧪 5. 测试建议

1. 确保 preload 在 vite.config.ts 中配置正确
2. 确保你使用 contextIsolation: true、nodeIntegration: false
3. 主进程与渲染进程中 API 名称一致，避免大小写错误

---

✅ 总结

通过上述结构，我们实现了：

• IPC 注册集中管理，主进程清晰职责分离
• 渲染进程只需 window.electronAPI.xxx() 调用
• 满足 Electron 安全通信规范（基于 contextBridge）

这为后续功能扩展打下了良好基础，适用于中大型 Electron 桌面应用项目。

---

如需示例代码，可参考项目模板：electron-vite-vue

欢迎点赞、收藏、分享 🙌