【Electron】vue+electron如何实现进程间的通信

最新推荐文章于 2026-03-25 17:27:46 发布

原创

最新推荐文章于 2026-03-25 17:27:46 发布 · 1.8k 阅读

标签

#vue.js #electron #javascript

本文详细介绍了在 Electron 中，Vue 应用如何进行渲染进程与主进程之间的通信，包括通过 `ipcRenderer` 和 `ipcMain` 模块的使用方法，以及在 Vue 项目中配置预加载脚本解决 Webpack5 的问题。此外，文章还讨论了 `remote` 和 `shell` 模块的常见配置和注意事项，并提供了封装 `ipcMain` 进行统一管理的方法。

一、前言

本文主要介绍electron渲染进程和主进程间的通信，以及在渲染进程和主进程中常用的配置项。

二、配置内容

1.进程间的通信

渲染进程和主进程间的通信主要通过ipcRenderer和ipcMain这两个模块实现的，其中ipcRenderer是在渲染进程中使用，ipcMain在主进程中使用。

其中，渲染进程使用ipcRenderer有两种方式

第一种方式引入`ipcRenderer`

这种方式主要是通过Electron窗口的preload方法实现的，以下是实现步骤

首先我们创建一个preload.js文件，把文件放入到public文件中

// preload.js

window.ipcRenderer = require('electron').ipcRenderer;

之后在主进程中引入

import { BrowserWindow, ipcMain } from 'electron'
let win = new BrowserWindow({width: 800, height: 600,webPreferences: {contextIsolation: false,// eslint-disable-next-line no-undefpreload: __static + '/preload.js'}
})
// 顺便这里放一个主进程的监听
ipcMain.on('pong', (e, args) => {console.log('这里是主进程pong', args)e.sender.send('ping', '你好 我是主进程')
})

这样我们就可以再渲染进程直接使用window.ipcRenderer，去监听或发送事件了。

// App.vue

// 渲染进程的监听
window.ipcRenderer.on('pang', (e, arg) => {console.log('渲染进程===我收到啦', arg)
})
// 渲染进程发送事件===这个可以放到一个点击事件里面去触发
window.ipcRenderer.send('ping', '你好呀，我是渲染进程')

实验结果如下，这里注意主进程的打印是在终端里面输出的