Electron Forge执行npm run make生成应用出现白屏，切换beta版CLI后触发插件配置错误

1. 修复Beta版CLI的插件格式错误 #

你遇到的Expected plugin to either be a plugin instance or [string, object] but found [object Object]错误，是因为Electron Forge v7+（beta版）的插件配置格式和旧版本不一样了。原来的独立对象格式被废弃，现在需要改成数组嵌套格式，把插件名称和配置放在同一个数组项里。

修改你的package.json中的plugins字段为：

"plugins": [
  [
    "@electron-forge/plugin-webpack",
    {
      "mainConfig": "./webpack.main.config.js",
      "renderer": {
        "config": "./webpack.renderer.config.js",
        "entryPoints": [
          {
            "html": "./src/index.html",
            "js": "./src/renderer.ts",
            "name": "main_window",
            "preload": {
              "js": "./src/preload.ts"
            }
          }
        ]
      }
    }
  ]
]

改完之后再运行electron-forge make，这个配置错误就应该消失了。

2. 解决应用启动白屏问题 #

白屏通常是Webpack打包后的资源路径不匹配，或者渲染进程入口没有正确初始化导致的，咱们一步步排查：

检查Webpack渲染进程配置 #

打开webpack.renderer.config.js，确保output.publicPath设置正确（这是生产环境下资源路径的关键）：

module.exports = {
  // ...其他配置
  output: {
    publicPath: './',
    filename: '[name].js'
  }
};

确认渲染进程入口文件逻辑 #

检查src/renderer.ts，确保它在DOM加载完成后再挂载内容，避免因为DOM未就绪导致内容无法显示：

document.addEventListener('DOMContentLoaded', () => {
  const appContainer = document.getElementById('app');
  if (appContainer) {
    appContainer.innerHTML = '<h1>Hello Electron!</h1>';
  }
});

如果你的src/index.html里没有id="app"的容器元素，记得补上。

验证Electron主进程的窗口配置 #

打开src/main.ts，确保窗口的loadURL指向了正确的打包后HTML路径，生产环境的路径要和你配置的entryPoints.name对应：

import path from 'path';
import { app, BrowserWindow } from 'electron';

const isDevelopment = process.env.NODE_ENV !== 'production';

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  // 关键：生产环境路径要匹配Webpack打包后的结构
  mainWindow.loadURL(
    isDevelopment
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../renderer/main_window/index.html')}`
  );
}

app.whenReady().then(createWindow);

检查preload脚本的配置 #

确保src/preload.ts没有语法错误，并且主进程里引用的是Webpack打包后的preload.js（不是原ts文件），同时开启contextIsolation保证安全性。

最后验证 #

改完以上配置后，先运行npm run start测试开发环境是否正常显示内容，确认没问题后再运行electron-forge make构建生产包，启动应用应该就不会白屏了。

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