Electron Forge+Vite应用第二窗口显示异常问题咨询

1. 调整Vite多入口配置 #

核心问题是Vite未为第二个窗口配置独立的入口与HTML文件，导致开发时复用主窗口资源、打包后找不到对应文件。修改vite.modal_renderer.config.mjs：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    // 输出到独立目录，避免和主窗口资源混淆
    outDir: '../../.vite/modal_renderer',
    rollupOptions: {
      input: {
        modal: './src/renderer/modalWindow.html' // 指向你的第二个窗口HTML路径
      }
    }
  },
  server: {
    port: 5174 // 与你看到的MODAL_WINDOW_VITE_DEV_SERVER_URL端口保持一致
  }
});

2. 更新Forge配置关联多窗口 #

修改forge.config.js，添加第二个窗口的渲染器配置，确保开发与打包阶段都能正确映射资源：

module.exports = {
  packagerConfig: {},
  rebuildConfig: {},
  makers: [...],
  plugins: [
    {
      name: '@electron-forge/plugin-vite',
      config: {
        // 主窗口配置
        renderer: {
          entry: 'src/renderer/index.html',
          viteConfig: 'vite.renderer.config.mjs'
        },
        // 第二个窗口的独立配置
        modal_renderer: {
          entry: 'src/renderer/modalWindow.html',
          viteConfig: 'vite.modal_renderer.config.mjs'
        }
      }
    }
  ]
};

3. 主进程中正确加载第二个窗口 #

在src/main.js中根据环境加载对应资源：开发环境用dev server URL，打包后用本地HTML文件：

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

function createMainWindow() {
  // 主窗口原有逻辑保持不变
}

function createModalWindow() {
  const modalWindow = new BrowserWindow({
    width: 400,
    height: 300,
    parent: BrowserWindow.getFocusedWindow(),
    modal: true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  if (process.env.NODE_ENV === 'development') {
    modalWindow.loadURL(process.env.MODAL_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    // 打包后加载本地构建好的HTML文件
    modalWindow.loadFile(path.join(__dirname, '../.vite/modal_renderer/modalWindow.html'));
  }
}

app.whenReady().then(() => {
  createMainWindow();
  // 可根据业务逻辑触发第二个窗口创建，比如菜单点击、按钮事件等
  // createModalWindow();
});

4. 验证目录结构 #

确保目录结构与配置路径对应：

electron-forge-2-windows/
├── src/
│   ├── main.js
│   ├── preload.js
│   └── renderer/
│       ├── index.html       # 主窗口HTML
│       └── modalWindow.html # 第二个窗口HTML
├── vite.renderer.config.mjs
├── vite.modal_renderer.config.mjs
└── forge.config.js

5. 测试验证 #

• 执行npm run start：第二个窗口应加载modalWindow.html内容，不再与主窗口重复
• 执行npm run make：打包后打开第二个窗口，能正常显示内容

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