Electron+Vue集成Capacitor后ipcRenderer EventEmitter失效问题

我正在开发一个同时支持Electron和Capacitor Android的项目，安装Capacitor后，Electron端的IPC通信完全失效，运行时抛出以下错误：

Uncaught Error: Cannot read properties of undefined (reading 'length')
    at EventEmitter.<anonymous> (VM115 preloadx.js:49:57)
    at EventEmitter.emit (VM14 node:events:390:28)
    at Object.onMessage (VM113 renderer_init:69:746)

相关代码 #

Preload脚本（位于public目录，构建后放入out目录） #

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

 let validChannels = [
            "api",
            "ascii",
            // 其他通道...
            "py-neo",
        ];

contextBridge.exposeInMainWorld(
    "api", {
    send: (channel, data) => {
        // 白名单校验
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data);
        }
    },
    receive: (channel, func) => {
                if (validChannels.includes(channel)) {
            // 移除event对象，避免暴露sender
            ipcRenderer.on(channel, (event, ...args) => func(...args)); // <-- 错误发生在这一行!!
        }
    },
    sendSync: (channel, data) => {
        // 白名单校验
        if (validChannels.includes(channel)) {
            return ipcRenderer.sendSync(channel, data);
        }
    },

}
);

主进程代码片段 #

function createWindow() {
  console.log("createWindow", __dirname);
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      //sandbox: true,
      contextIsolation: true, 
      enableRemoteModule: true, 
      nodeIntegration: true,  
      nodeIntegrationInWorker: true, 
      preload: path.join(__dirname, "out", "preload.js"), // 使用preload脚本
    },
  });

版本信息及Package.json脚本 #

• Electron 18.1.0
• Node 16.15.1

package.json脚本：

"scripts": {
    "start": "vue-cli-service build && electron --disable-gpu --disable-software-rasterizer .  ",
    "dist": "electron-builder",
    "build": "vue-cli-service build",
    "android": "npx cap sync android"
  },

需求：仅需保证桌面端启动时IPC通信正常，Android端不需要该功能。

问题原因及修复方案 #

核心原因 #

Capacitor会在全局环境中注入名为api的对象，和你通过contextBridge.exposeInMainWorld暴露的IPC接口重名，导致Electron的IPC方法被覆盖、破坏，最终触发length属性读取失败的错误。

修复步骤 #

1. 修改Preload脚本的暴露名称
   把暴露到全局的api改成不冲突的名称，比如electronApi：

   const { contextBridge, ipcRenderer } = require("electron");
   
   let validChannels = [
       "api",
       "ascii",
       // 其他通道...
       "py-neo",
   ];
   
   contextBridge.exposeInMainWorld(
       "electronApi", { // 重命名此处
       send: (channel, data) => {
           if (validChannels.includes(channel)) {
               ipcRenderer.send(channel, data);
           }
       },
       receive: (channel, func) => {
           if (validChannels.includes(channel)) {
               ipcRenderer.on(channel, (event, ...args) => func(...args));
           }
       },
       sendSync: (channel, data) => {
           if (validChannels.includes(channel)) {
               return ipcRenderer.sendSync(channel, data);
           }
       },
   });
   

2. 前端代码中区分环境调用
   在渲染进程代码里，先判断是否处于Electron环境，再调用IPC方法，避免影响Android端：

   // 判断是否为Electron环境
   const isElectron = () => window.navigator.userAgent.includes('Electron');
   
   // 使用IPC时做环境校验
   if (isElectron()) {
       // 接收消息
       window.electronApi.receive('ascii', (data) => {
           // 你的业务逻辑
       });
       // 发送消息
       window.electronApi.send('api', yourData);
   }
   

3. 优化主进程WebPreferences配置
   关闭不需要的配置项，符合Electron安全最佳实践：

   function createWindow() {
       console.log("createWindow", __dirname);
       mainWindow = new BrowserWindow({
           width: 800,
           height: 600,
           webPreferences: {
               contextIsolation: true, // 必须保持开启，确保上下文隔离安全
               enableRemoteModule: false, // Electron 14+已废弃，无需开启
               nodeIntegration: false, // 用preload+contextBridge即可，无需开启Node集成
               preload: path.join(__dirname, "out", "preload.js"),
           },
       });
   }
   

4. 验证构建脚本
   确保vue-cli-service build执行后，preload.js被正确复制到out目录，或者调整preload路径指向public目录的原文件（如果你的构建工具会自动处理的话）。

内容的提问来源于stack exchange，提问作者D Liebman