Electron.js运行preload.js报错 无法加载预加载脚本如何解决

故障根因 #

• 安全配置缺失：Electron 12+版本默认开启contextIsolation上下文隔离、关闭nodeIntegration，原有代码未适配该安全规则，直接在preload中无隔离使用ipcRenderer、操作DOM会触发权限错误，导致脚本运行中断。
• 执行时机错误：preload脚本执行时机早于页面DOM渲染，直接在preload中调用document.getElementById("upload")会拿到null值，后续绑定事件直接抛出JS错误，表现为preload加载异常。
• 路径配置风险：若main.js与preload.js不在同一目录，原有path.join(__dirname, "preload.js")配置会指向错误路径，直接导致preload文件404加载失败。
• 逻辑兼容问题：主进程文件选择逻辑外层加了非macOS平台判断，会导致macOS设备点击上传无响应。

分步修复方法 #

1. 修正主进程窗口配置
   打开main.js，修改createWindow方法内的webPreferences配置，显式声明安全规则，同时可打印preload路径确认文件位置正确：

   function createWindow() {
     // 打印preload绝对路径，确认对应位置存在preload.js文件
     console.log('preload脚本路径:', path.join(__dirname, "preload.js"))
     const win = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         preload: path.join(__dirname, "preload.js"),
         nodeIntegration: false,
         contextIsolation: true,
         enableRemoteModule: false,
         sandbox: true
       },
     });
     win.webContents.openDevTools();
     win.loadFile("index.html");
   }
   

   若打印出的路径下找不到preload.js，根据实际目录调整path.join的路径参数即可。

2. 重构preload脚本
   删除preload中所有DOM操作逻辑，使用contextBridge仅向渲染进程暴露必要的IPC通信方法，符合安全规范：

   const { ipcRenderer, contextBridge } = require("electron");
   
   contextBridge.exposeInMainWorld("electronAPI", {
     triggerFileSelect: () => ipcRenderer.send("file-request"),
     onFileSelectReply: (cb) => ipcRenderer.on("file", (_, filePath) => cb(filePath))
   });
   

3. 迁移DOM逻辑到渲染进程
   新建renderer.js存放渲染进程逻辑，所有DOM操作放在该文件中，避免在preload里操作页面元素：

   // 等待DOM加载完成后再获取元素绑定事件
   document.addEventListener('DOMContentLoaded', () => {
     const uploadBtn = document.getElementById("upload");
     uploadBtn.addEventListener("click", () => {
       window.electronAPI.triggerFileSelect();
     });
   
     window.electronAPI.onFileSelectReply((filePath) => {
       console.log("选中的文件路径：", filePath);
       // 后续可在此处添加读取文本内容、渲染到页面的逻辑
     });
   })
   

   在index.html的</body>标签前引入该脚本：

   <script src="./renderer.js"></script>
   

   若控制台报CSP内容安全策略错误，在index.html的<head>标签内添加以下配置：

   <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
   

4. 修复主进程平台兼容问题
   删除ipcMain.on("file-request", ...)回调中包裹逻辑的if (process.platform !== "darwin")判断，保证全平台都能正常弹出文件选择框。

所有修改完成后重启Electron应用，preload即可正常加载，文件上传选择功能可正常运行。

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