Electron框架中index.html报require is not defined错误如何解决？

API 探路者

2026-9-27

错误原因

该报错由Electron安全配置导致：你在Main.js中开启了contextIsolation: true（上下文隔离，Electron高版本默认开启的安全选项），此时即使配置了nodeIntegration: true，渲染进程的普通网页上下文也无法直接访问Node.js的require方法，也不能直接调用Electron相关API。

解决方法

方案1：关闭上下文隔离（仅用于本地测试，禁止在生产环境使用）

直接修改Main.js中webPreferences的配置项，将contextIsolation设为false即可：

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false, // 关闭上下文隔离
  enableRemoteModule: false,
  preload: path.join(__dirname, "preload.js")
}

注意：该方案会导致XSS攻击风险大幅提升，攻击者一旦在页面注入恶意代码就能直接获取系统权限，不推荐任何正式场景使用。

方案2：通过preload脚本暴露所需API（推荐，符合安全规范）

不需要修改原有安全配置，仅通过preload脚本将渲染进程需要用到的能力暴露到全局即可：

编辑项目中的preload.js文件（你已在Main.js中配置了该文件路径，若不存在直接新建即可）：

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

// 仅暴露需要的方法到渲染进程的全局window对象上
contextBridge.exposeInMainWorld('electronAPI', {
  submitFile: (fileInfo) => ipcRenderer.send('submit-file', fileInfo)
  // 其他需要用到的IPC方法都可以在此处扩展
})

修改index.html中的代码，删除直接调用require的逻辑，改用暴露的全局API：

<script>
document.querySelector('form').addEventListener('submit',(event) =>{
  event.preventDefault();
  const file = document.querySelector('input').files[0];
  // 调用preload暴露的方法
  window.electronAPI.submitFile(file);
});
</script>