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

最新推荐文章于 2026-05-16 08:24:24 发布

原创

最新推荐文章于 2026-05-16 08:24:24 发布 · 937 阅读

标签

#electron #vue.js #javascript

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'] })
  }