Electron.js引入remote模块后渲染进程脚本完全无法运行问题求助

故障根因 #

你遇到的问题是Electron的默认安全限制导致的：

• 新版Electron默认禁用渲染进程的Node.js集成，渲染进程中require函数未定义，直接调用会抛出ReferenceError，导致整个脚本执行中断，所以哪怕是第一行的alert也不会触发
• Electron 14及以上版本已经将remote模块从核心包中移除，即使开启Node集成也无法直接从electron包中引入remote

解决方案 #

快速生效方案（适合本地自用项目，生产环境不推荐） #

1. 安装独立维护的remote模块

npm install @electron/remote --save

2. 修改主进程index.js配置：

// 顶部引入remote主进程模块
const remoteMain = require('@electron/remote/main')
const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')
const sass = require('sass')
const fs = require('fs')

function createWindow () {
    renderStylesheets()
    let mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        resizable: true,
        transparent: true,
        frame: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            // 开启渲染进程Node集成
            nodeIntegration: true,
            // 关闭上下文隔离
            contextIsolation: false
        }
    })
    // 为当前窗口启用remote能力
    remoteMain.initialize()
    remoteMain.enable(mainWindow.webContents)
    mainWindow.loadFile('index.html').then(() => {})
}

3. 修改app.js中的引入语句：
   将原来的

const { BrowserWindow, app } = require('electron').remote;

替换为

const { BrowserWindow, app } = require('@electron/remote');

修改完成后app.js就可以正常执行，窗口控制逻辑也能正常运行。

生产环境安全方案（推荐） #

不需要开启Node集成和关闭上下文隔离，通过预加载脚本暴露窗口控制能力，避免安全风险：

1. 编辑preload.js文件，通过上下文桥暴露控制方法：

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('windowControls', {
    minimize: () => ipcRenderer.send('window:minimize'),
    toggleMaximize: () => ipcRenderer.send('window:toggleMaximize'),
    close: () => ipcRenderer.send('window:close')
})

2. 在主进程index.js中监听IPC事件，执行对应窗口操作：

const {app, BrowserWindow, ipcMain} = require('electron')
// ...其余原有引入不变

// 新增IPC事件监听
ipcMain.on('window:minimize', (e) => {
    const win = BrowserWindow.fromWebContents(e.sender)
    win.minimize()
})
ipcMain.on('window:toggleMaximize', (e) => {
    const win = BrowserWindow.fromWebContents(e.sender)
    win.isMaximized() ? win.unmaximize() : win.maximize()
})
ipcMain.on('window:close', (e) => {
    const win = BrowserWindow.fromWebContents(e.sender)
    win.close()
})

3. 直接在app.js中调用暴露的方法，不需要引入任何模块：

alert("现在可以正常弹出了")
// 绑定按钮点击事件示例
$('#minimizeBtn').click(() => window.windowControls.minimize())
$('#maximizeBtn').click(() => window.windowControls.toggleMaximize())
$('#closeBtn').click(() => window.windowControls.close())

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