在 Electron 中使用 Vite 的多入口模式实现多窗口渲染

一、背景

在 Electron 应用开发中，一个常见需求是：
主窗口使用完整布局（如侧边栏、路由），而某些新窗口（视频播放、设置页、预览窗口）需要完全不同的界面结构。

默认情况下，Vite 前端项目只有一个入口 (index.html)，这会导致：

所有 Electron 窗口只能加载同一套页面
新窗口会继承主窗口的布局、路由和样式
自定义窗口 UI 非常困难

为了让每个 Electron 窗口拥有独立的页面，需要使用 Vite 多入口（Multi-Page）模式。

二、问题

如何让 Electron 中的不同窗口渲染不同页面？

例如：

主窗口加载 index.html
播放窗口加载 player.html
设置窗口加载 setting.html

但传统 Vite 是单入口，需要额外配置。

因此我们需要解决两个问题：

Vite 输出多个 HTML 页面并为每个页面打包独立的 JS 入口
Electron 主进程可以分别加载对应的页面

三、实现方案

1. 配置 Vite 多入口

在 vite.config.ts 中添加 build.rollupOptions.input：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
        player: path.resolve(__dirname, 'player.html'),
        setting: path.resolve(__dirname, 'setting.html'),
      },
    },
  },
});

这样 Vite 构建时会生成：

dist/
├── index.html
├── player.html
└── setting.html

每个页面都能绑定不同的 React 入口，比如：

1
2
3

src/main/main.tsx
src/player/player.tsx
src/setting/setting.tsx

2. Electron 主进程根据窗口加载不同入口

import { BrowserWindow } from 'electron';

const isDev = !app.isPackaged;

// 主窗口
function createMainWindow() {
  const win = new BrowserWindow({ width: 1200, height: 800 });
  win.loadURL(isDev ? 'http://localhost:5173/' : 'dist/index.html');
}

// 播放窗口
function createPlayerWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadURL(isDev ? 'http://localhost:5173/player.html' : 'dist/player.html');
}

// 设置窗口
function createSettingWindow() {
  const win = new BrowserWindow({ width: 500, height: 400 });
  win.loadURL(
    isDev ? 'http://localhost:5173/setting.html' : 'dist/setting.html'
  );
}

开发模式下记得写完整的页面路径：

1	http://localhost:5173/player.html

否则浏览器会默认加载 index.html。

四、总结

通过 Vite 的多入口机制，我们可以：

为 Electron 中的不同窗口提供不同 HTML 页面
让每个窗口拥有独立的 React 入口、布局和逻辑
避免多窗口渲染同一个页面导致的布局污染和路由冲突

这是目前 Electron + Vite 实现多窗口最直接、最稳定的方式，也适用于需要类似 VS Code、Bilibili 客户端这种多窗口场景的桌面应用。