Electron项目中index.js无法在index.html中生效，点击按钮无响应

问题根因 #

Electron v12及之后版本默认开启两项安全配置，导致老教程的代码无法直接运行：

• nodeIntegration: false：禁止渲染进程直接使用Node.js的require语法
• contextIsolation: true：隔离渲染进程上下文和Node.js上下文

你在index.html中写的require('./index.js')代码直接执行失败，所以index.js的逻辑完全没有加载，才会出现无日志、按钮点击无反应的问题。

解决方案 #

方案1：临时适配老教程（仅用于本地测试跑通demo） #

修改main.js中创建BrowserWindow的webPreferences配置，关闭上述两项安全限制：

const { BrowserWindow } = require('electron')
const path = require('path')

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // 新增以下两行配置
    nodeIntegration: true,
    contextIsolation: false
  }
})

mainWindow.loadFile('index.html')
// 可选：打开渲染进程控制台方便调试
mainWindow.webContents.openDevTools()

修改后重启项目，原有代码即可正常运行，点击按钮会打印预期日志。

方案2：官方推荐规范写法（生产环境可用） #

直接开启nodeIntegration存在安全风险，Electron官方推荐使用预加载脚本（preload）实现需求：

1. 将原index.js重命名为preload.js，原有逻辑不需要改动
2. 修改main.js的BrowserWindow配置，指定preload脚本路径：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js')
  }
})

3. 删除index.html中的<script>require('./index.js');</script>代码即可。
   preload脚本运行在渲染进程专属上下文，可以直接访问DOM和有限的Node.js API，满足当前需求的同时符合安全规范。

调试小技巧 #

Electron有主进程和渲染进程两个独立的控制台：主进程日志输出在你启动项目的终端里，渲染进程的日志和报错需要打开窗口的开发者工具才能看到，遇到前端逻辑异常优先打开渲染控制台排查报错。

内容的提问来源于stack exchange，提问作者aka.Calamaro