Electron中require未定义报错：自定义关闭按钮实现遇阻

核心原因 #

Electron 默认为了安全，在渲染进程（前端页面）中禁用了 Node.js 集成，所以你无法直接在页面 JS 里使用 require。主进程确实无法访问 DOM，但可以通过 IPC 通信 让渲染进程和主进程配合完成操作，这也是官方推荐的安全做法。

方案一：IPC 通信 + Context Bridge（推荐，符合安全规范） #

这个方案通过预加载脚本在渲染进程和主进程之间建立安全的通信通道，既不用暴露完整的 Node.js API，又能实现功能。

1. 主进程代码（比如 main.js） #

在创建窗口时监听关闭请求的 IPC 事件：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 指定预加载脚本，这个脚本会在页面加载前运行，拥有 Node.js 权限
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // 监听渲染进程发来的关闭窗口指令
  ipcMain.on('close-window', () => {
    mainWindow.close();
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

2. 预加载脚本（preload.js） #

用 contextBridge 给前端页面暴露一个安全的 API，避免直接暴露 Electron 内部 API：

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

// 向全局window对象添加一个安全的API
contextBridge.exposeInMainWorld('electronAPI', {
  closeWindow: () => ipcRenderer.send('close-window')
});

3. 前端页面 JS #

直接调用暴露的 API，不用任何 require：

document.getElementById("close-btn").addEventListener("click", () => {
  window.electronAPI.closeWindow();
});

方案二：临时开启 Node.js 集成（不推荐，仅用于测试） #

如果你只是临时测试功能，可以在创建窗口时开启 Node.js 集成，但这会带来安全风险（页面脚本可以直接访问 Node.js 底层 API）：

// 在main.js的BrowserWindow配置中修改webPreferences
webPreferences: {
  nodeIntegration: true,
  contextIsolation: false
}

修改后你之前的代码就能直接运行，但正式项目强烈不建议这么做。

关于“从普通JS调用Node文件并获取输出” #

本质上就是通过 IPC 通信实现：渲染进程发送请求，主进程执行 Node.js 逻辑，再把结果通过 IPC 发回渲染进程。比如你想在前端调用 Node.js 的文件读取功能，也可以用类似上面的方式，在预加载脚本暴露对应的 API，主进程处理后返回结果。

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