Electron预加载脚本无法运行问题求助

核心排查与修复步骤 #

你遇到的preload.js未生效、日志不显示问题，按以下优先级逐一验证修复：

1. 日志输出位置纠正 #

preload.js属于渲染进程脚本，其中的console.log("LOADED!")会输出到Chrome开发者工具控制台，而非终端（终端仅显示主进程日志）。

• 快速调试：在main.js的createWindow函数中添加一行代码，自动打开开发者工具：

  const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        preload: path.join(__dirname, "preload.js"),
      },
    });
  
    win.loadFile("index.html");
    win.webContents.openDevTools(); // 新增：自动打开渲染进程控制台
  };
  

  运行应用后，就能在弹出的DevTools控制台中看到LOADED!日志。

2. 补全DOM结构 #

preload.js中的replaceText函数需要操作chrome-version、node-version、electron-version三个ID的DOM元素，若index.html中缺失这些元素，版本替换逻辑不会生效（但日志仍会显示）。
补全index.html示例结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Electron版本信息</title>
</head>
<body>
    <h1>依赖版本</h1>
    <p>Chrome: <span id="chrome-version"></span></p>
    <p>Node.js: <span id="node-version"></span></p>
    <p>Electron: <span id="electron-version"></span></p>
</body>
</html>

3. 验证预加载脚本路径 #

通过在main.js中打印路径，确认脚本文件位置是否正确：

console.log("预加载脚本路径：", path.join(__dirname, "preload.js"));

运行应用时，终端会输出该路径，检查是否与实际文件位置一致。

4. 确认启动命令正确性 #

确保package.json中的启动脚本配置无误：

{
  "name": "electron-demo",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^28.0.0"
  }
}

使用npm start启动应用，切勿直接用node main.js运行（无法触发Electron环境）。

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