Electron打包构建后渲染进程无法访问主进程方法问题求助

问题根因 #

1. IPC通信方案报错原因：Electron IPC 传输的所有参数都会经过结构化克隆算法序列化，函数类型无法被序列化，你直接把回调函数作为参数传给sendSync自然会触发an object could not be cloned报错。另外sendSync是同步调用，会阻塞整个渲染进程，不推荐使用。
2. @electron/remote打包失效原因：除了模块本身废弃的问题，打包后找不到全局变量通常是因为打包后渲染进程的上下文隔离配置、remote模块的窗口授权未正确配置，且remote模块存在性能损耗和安全风险，不适合生产环境使用。

可行解决方案（推荐） #

采用异步IPC+预加载脚本的方案实现，符合Electron最新安全规范，无打包兼容问题：

步骤1：修改主进程（index.js）代码 #

用ipcMain.handle注册异步处理逻辑，不需要接收回调参数，直接返回异步结果：

// 注册异步处理事件
ipcMain.handle("getData", async () => {
  return new Promise((resolve, reject) => {
    const db = new sqlite3.Database(
      dbPath,
      sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE, 
      function(error) { 
        if(error){
          log.error(`exception: ${error}`);
          return reject(error);
        }
        data.getModel(db, log, function(rawDataStr) {
          resolve(rawDataStr);
        })
      }
    )
  })
});

步骤2：配置预加载脚本（preload.js） #

Electron 默认开启上下文隔离，不能直接在渲染进程引入electron模块，需要通过预加载脚本暴露调用接口：

const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
  getData: () => ipcRenderer.invoke('getData')
})

同时要在主进程创建BrowserWindow时指定预加载脚本配置：

const mainWindow = new BrowserWindow({
  // 其他窗口配置
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'), // 替换为你的preload.js实际路径
    contextIsolation: true, // 保持默认开启，安全
    nodeIntegration: false, // 保持默认关闭，安全
  }
})
// 如果你之前用了remote模块，记得删掉相关初始化和全局变量配置

步骤3：修改渲染进程（App.js）代码 #

直接调用预加载脚本暴露的全局API即可：

window.electronAPI.getData()
  .then(rawData => {
    if (rawData.name && rawData.name == 'Error') {
      alert('PRT DB is not present');
    } else {
      const sharedObj = { rawData };
      app.advanceReadiness();
    }
  })

该方案符合Electron官方推荐的安全规范，不存在序列化问题，也不会出现打包后变量找不到的兼容问题。

内容的提问来源于stack exchange，提问作者Richard G. Coles