Electron 主进程和渲染进程通信收不到消息怎么办？

春莉提问于 2026-03-01 11:05:20 阅读 7

框架

我用 Electron 做了个小工具，主进程里监听了 ‘get-data’ 事件，但渲染进程发了消息后完全没反应，也没报错，不知道是哪一步写错了。

我在主进程里这样注册的监听：

ipcMain.handle('get-data', async () => {
  return { message: 'Hello from main!' };
});

然后在渲染进程里用 preload 调用：

const result = await ipcRenderer.invoke('get-data');
console.log(result);

但控制台啥也没有，连错误都不报，是不是 invoke 和 handle 没对上？还是 preload 没配好？

IPC通信

我来解答赞 5 收藏

反馈

1 条解答

码农晨羲 Lv1

这个问题十有八九是 preload 没配好，或者渲染进程里直接引用 electron 报错了但没显示出来。

Electron 12 之后 nodeIntegration 默认是关的，渲染进程里直接 require('electron') 会报错，必须通过 preload 暴露 API。

直接用这个完整的配置，一套带走。

先看 preload.js 怎么写：

const { contextBridge, ipcRenderer } = require('electron');



contextBridge.exposeInMainWorld('electronAPI', {

  getData: () => ipcRenderer.invoke('get-data')

});

然后主进程创建窗口的时候，preload 路径一定要配对：

const { app, BrowserWindow, ipcMain } = require('electron');

const path = require('path');



function createWindow() {

  const win = new BrowserWindow({

    width: 800,

    height: 600,

    webPreferences: {

      preload: path.join(__dirname, 'preload.js'),

      contextIsolation: true,

      nodeIntegration: false

    }

  });



  win.loadFile('index.html');

}



ipcMain.handle('get-data', async () => {

  return { message: 'Hello from main!' };

});



app.whenReady().then(createWindow);

渲染进程里调用方式要改，用 preload 暴露出来的方法：

async function loadData() {

  const result = await window.electronAPI.getData();

  console.log(result);

}



loadData();

注意几个坑：

第一，contextIsolation 必须开，这是默认值也是推荐值，别关。

第二，渲染进程里用 window.electronAPI.getData()，不是直接用 ipcRenderer。

第三，如果还是没反应，打开 DevTools 的 Console 看看有没有报 "require is not defined" 或者 "electronAPI is undefined" 之类的错。有这种错说明 preload 没加载成功，检查路径是不是对的。

调试的时候可以在 preload.js 最上面加个 console.log('preload loaded')，看控制台有没有输出，确认 preload 文件确实被执行了。

2026-03-01 11:16