Electron+React打包后@electron/remote禁用问题求助

一、@electron/remote 禁用错误 #

你已在main.js中初始化并启用remote，但打包后仍报错，核心问题大概率是打包路径异常或preload脚本配置缺失，按以下步骤修复：

1. 修正preload脚本路径
   打包后Electron的目录结构会变化，__dirname指向的路径和开发环境不一致，导致preload脚本无法加载。修改main.js中的路径配置：

const path = require('path');
const { app, BrowserWindow } = require('electron');
const { initialize, enable } = require('@electron/remote/main');

initialize();

app.whenReady().then(() => {
  const window = new BrowserWindow({
    width: 800,
    height: 600,
    backgroundColor: 'black',
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: true,
      // 用app.getAppPath()确保打包后能准确定位preload文件
      preload: path.join(app.getAppPath(), 'preload.js')
    }
  });

  enable(window.webContents);
  window.loadURL('你的React打包后页面路径'); // 开发环境用http://localhost:3000，生产环境用本地file路径
});

2. 配置preload脚本暴露remote
   因为开启了contextIsolation: true，渲染进程无法直接访问Electron模块，需在preload.js中显式暴露remote：

// preload.js
const { remote } = require('@electron/remote');
window.remote = remote;

同时在package.json中配置打包时包含该文件：

{
  "build": {
    "files": [
      "main.js",
      "preload.js",
      "build/**/*" // React打包后的静态资源目录
    ]
  }
}

3. 确认enable调用时机
   必须在窗口创建完成后、loadURL/loadFile之前调用enable(window.webContents)，确保WebContents加载前已启用remote权限。

二、electron-builder 命令未识别 #

该问题源于electron-builder未正确安装或未配置本地执行路径，解决方法如下：

1. 本地安装electron-builder
   执行命令安装开发依赖：

npm install electron-builder --save-dev

2. 在package.json中配置打包脚本
   添加自定义脚本，避免直接调用全局命令：

{
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder",
    "dist": "electron-builder --dir"
  }
}

之后通过npm run pack或npm run dist执行打包操作。

3. 临时应急方案：用npx执行
   若上述配置仍报错，直接调用本地安装的electron-builder：

npx electron-builder

内容的提问来源于stack exchange，提问作者William Del Giudice