如何用React/Angular实现多窗口Electron应用？每个窗口对应独立HTML文件

不管用React还是Angular，核心思路都是让框架构建出多个独立的HTML入口文件，再由Electron主进程分别加载这些文件创建窗口。以下分框架给出具体步骤：

Angular 配置步骤 #

1. 修改angular.json配置多页入口 #

在项目根目录的angular.json中，找到projects -> [你的项目名称] -> architect -> build -> options，添加pages配置，为每个窗口指定独立的入口脚本、HTML模板和输出文件名：

"pages": {
  "main": {
    "entry": "src/main.ts",
    "index": "src/index.html",
    "output": "index.html"
  },
  "settings": {
    "entry": "src/settings-main.ts",
    "index": "src/settings.html",
    "output": "settings.html"
  }
}

2. 创建窗口对应的入口文件和HTML模板 #

• 新建src/settings-main.ts，作为设置窗口的引导脚本，内容类似主入口：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SettingsModule } from './settings/settings.module';

platformBrowserDynamic().bootstrapModule(SettingsModule)
  .catch(err => console.error(err));

• 新建src/settings.html，结构与index.html一致，仅替换根组件选择器为设置窗口的根组件（比如<app-settings></app-settings>）。
• 为设置窗口创建独立的模块SettingsModule，并在其中声明引导根组件SettingsComponent。

3. Electron主进程加载对应HTML #

在Electron主进程文件（比如main.js）中，创建窗口时直接加载构建后的目标HTML：

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

function createMainWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile(path.join(__dirname, '../dist/[你的项目名]/index.html'));
}

function createSettingsWindow() {
  const win = new BrowserWindow({ width: 600, height: 400 });
  win.loadFile(path.join(__dirname, '../dist/[你的项目名]/settings.html'));
}

app.whenReady().then(() => {
  createMainWindow();
  createSettingsWindow();
});

React 配置步骤 #

方案1：基于Vite构建（推荐） #

Vite原生支持多入口配置，步骤更简单：

1. 修改vite.config.js，配置多入口HTML：

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

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        settings: './settings.html'
      }
    }
  }
});

2. 在项目根目录新建settings.html，结构与index.html一致，确保包含<div id="root"></div>。
3. 新建src/settings.jsx（或.js）作为设置窗口的入口：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Settings from './Settings';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Settings />);

方案2：基于Create React App（需修改Webpack） #

CRA默认单入口，需用react-app-rewired修改配置：

1. 安装依赖：npm install react-app-rewired --save-dev
2. 项目根目录新建config-overrides.js，配置多入口和多HTML模板：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = function override(config) {
  // 替换单入口为多入口
  config.entry = {
    main: path.resolve(__dirname, 'src/index.js'),
    settings: path.resolve(__dirname, 'src/settings.js')
  };

  // 修改输出文件名避免覆盖
  config.output.filename = 'static/js/[name].bundle.js';
  config.output.chunkFilename = 'static/js/[name].chunk.js';

  // 移除默认的HTML插件，添加自定义的多HTML配置
  config.plugins = config.plugins.filter(plugin => !(plugin instanceof HtmlWebpackPlugin));
  config.plugins.push(
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'),
      filename: 'index.html',
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/settings.html'),
      filename: 'settings.html',
      chunks: ['settings']
    })
  );

  return config;
};

3. 修改package.json的启动/构建脚本，替换react-scripts为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

4. 新建public/settings.html和src/settings.js，内容同Vite方案。

3. Electron主进程加载对应HTML #

与Angular逻辑一致，加载build目录下的对应HTML文件：

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

function createMainWindow() {
  const win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile(path.join(__dirname, '../build/index.html'));
}

function createSettingsWindow() {
  const win = new BrowserWindow({ width: 600, height: 400 });
  win.loadFile(path.join(__dirname, '../build/settings.html'));
}

app.whenReady().then(() => {
  createMainWindow();
  createSettingsWindow();
});

注意事项 #

• 每个独立窗口的状态是隔离的，如需共享数据，需使用Electron的ipcMain/ipcRenderer进行进程间通信。
• 构建时确保所有入口文件都被正确编译，Angular运行ng build、React运行npm run build即可生成所有HTML文件。

内容的提问来源于stack exchange，提问作者Sarath C Ani