Electron预加载vers对象未生效，渲染进程报未定义错误

原本可正常运行的Electron脚本，按官方教程预加载vers对象并在HTML中展示其属性。后来main.js出现大小写错误：BrowserWindow变browserwindow、部分ipcMain变ipcmain，随后渲染进程renderer.js报错Uncaught ReferenceError: vers is not defined。排查预加载相关代码未发现异常，代码与教程一致，VS Code能自动补全vers.chrome()等方法，但运行时仍报错。注释renderer.js中vers引用可消除报错但丢失功能，仅将预加载对象命名为vers而非教程的versions，未找到匹配问题。

相关代码：

main.js #

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        minwidth: 800,
        minheight: 600,

        resizable: true,
        frame: false,
        webpreferences: {
            preload: path.join(__dirname, "preload.js"),
            nodeintegration: true,
        },
    });

    win.loadFile("index.html");
};

preload.js #

const { contextBridge } = require("electron");

contextBridge.exposeInMainWorld("vers", {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,
});

renderer.js #

const information = document.getElementById("info");

information.innerText = `This app uses:\n Chrome (v${vers.chrome()}),\n
Node.js (v${vers.node()}),\n
and Electron (v${vers.electron()})`;

index.html #

<body>
<div id="info"></div>
</body>
<script src="./renderer.js"></script>

问题出在main.js的配置项大小写错误，Electron的BrowserWindow配置严格遵循驼峰命名，错误的小写命名会被忽略，导致预加载脚本根本没被正确注入到渲染进程，所以vers对象不存在。

需要修正的错误项：

• webpreferences → webPreferences
• minwidth → minWidth
• minheight → minHeight
• nodeintegration → nodeIntegration
  同时要确保BrowserWindow和ipcMain的大小写正确（比如顶部导入时const { BrowserWindow, ipcMain } = require('electron')）。

修正后的main.js：

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        minWidth: 800,
        minHeight: 600,

        resizable: true,
        frame: false,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
            nodeIntegration: true,
        },
    });

    win.loadFile("index.html");
};

修正配置项的驼峰命名后，Electron会正确加载预加载脚本，contextBridge.exposeInMainWorld注入的vers对象就能在渲染进程正常访问了。VS Code能补全是因为编辑器识别了preload里的定义，但运行时预加载未生效，所以之前会报错。

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