Electron JS点击按钮无法触发简单操作，主进程与渲染进程逻辑关联失败如何解决？

API 探路者

2026-10-1

问题原因

你当前开启了Electron默认的contextIsolation: true安全配置，渲染进程中无法直接使用Node.js的require语法，index.js第一行const electron = require('electron')会直接抛出未捕获错误，导致后续代码全部终止执行，所以按钮点击事件没有绑定成功，断点也无法触发。

修复方案

1. 基础功能修复（适配当前修改文本的需求）

直接删除index.js第一行的const electron = require('electron')即可，你当前的纯前端交互逻辑不需要调用Electron相关API，删除后代码即可正常运行，按钮点击事件会正常触发。

2. 后续主进程/渲染进程通信规范（用于后续局域网命令发送的功能开发）

如果你后续需要实现渲染进程和主进程的通信，需要通过preload.js使用contextBridge暴露接口，示例如下：

preload.js 示例代码

const { contextBridge, ipcRenderer } = require('electron')
// 向渲染进程暴露指定方法，避免直接暴露全量Electron API带来的安全问题
contextBridge.exposeInMainWorld('electronAPI', {
  sendLanCommand: (commandParams) => ipcRenderer.send('exec-lan-command', commandParams),
  onCommandResult: (callback) => ipcRenderer.on('command-result', (_event, data) => callback(data))
})

主进程接收通信示例

在main.js中添加如下代码监听渲染进程发送的事件：

ipcMain.on('exec-lan-command', (_event, params) => {
  // 在这里执行局域网命令发送逻辑
  // 执行完成后可以通过以下代码返回结果给渲染进程
  // _event.reply('command-result', 执行结果)
})

渲染进程调用示例

在index.js中可以直接调用预暴露的方法：

// 发送命令
window.electronAPI.sendLanCommand({target: '192.168.1.2', cmd: 'xxx'})
// 监听返回结果
window.electronAPI.onCommandResult((res) => {
  console.log('命令执行结果', res)
})