Electron Forge中Vite多入口HTML配置的正确方式

在使用Electron Forge结合Vite构建Electron应用时，开发者可能会遇到需要配置多个HTML入口文件的需求。本文将详细介绍如何正确配置Vite的rollupOptions来实现多HTML入口支持。

常见配置误区

很多开发者初次尝试在Electron Forge项目中配置多HTML入口时，容易犯一个典型错误：直接将rollupOptions放在Vite配置的根级别。这种配置方式会导致Electron Forge在构建过程中完全忽略这些设置，最终只生成默认的index.html文件。

错误配置示例：

export default defineConfig({
  // ...其他配置
  rollupOptions: {  // 错误位置
    input: {
      main_window: resolve(__dirname, "index.html"),
      modal_window: resolve(__dirname, "modal.html"),
    },
  }
})

正确配置方法

要实现多HTML入口的正确配置，必须将rollupOptions放置在build配置项内部。这是Vite构建系统的要求，也是Electron Forge处理Vite配置的标准方式。

正确配置示例：

export default defineConfig({
  // ...其他配置
  build: {
    outDir: `.vite/renderer/${name}`,
    rollupOptions: {  // 正确位置
      input: {
        main_window: resolve(__dirname, "index.html"),
        modal_window: resolve(__dirname, "modal.html"),
      },
    },
  }
})

开发模式与生产构建的区别

值得注意的是，在开发模式下（通过npm start启动），即使配置不正确，多个HTML文件可能也能正常工作。这是因为开发服务器采用了不同的处理机制。然而在生产构建阶段（通过npm run package），只有正确的配置才能确保所有HTML文件都被正确处理并包含在最终输出中。

实际应用场景

这种多HTML入口配置在Electron应用中非常实用，特别是当你的应用需要：

1. 主窗口和多个辅助窗口（如设置窗口、关于窗口等）
2. 不同功能的独立界面模块
3. 需要独立加载的模态对话框
4. 应用内多个独立运行的子应用

配置验证方法

为确保配置生效，开发者可以检查以下位置：

1. 构建后的.vite/renderer目录下是否包含所有指定的HTML文件
2. 生产环境中所有窗口是否能正确加载对应的HTML文件
3. 构建日志中是否有关于多个入口点的处理信息

通过遵循这些配置原则，开发者可以充分利用Electron Forge和Vite的强大功能，构建复杂的多窗口Electron应用。