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

在使用Electron Forge结合Vite构建Electron应用时，开发者经常需要处理多窗口场景，这就涉及到多个HTML入口文件的配置问题。本文将详细介绍如何正确配置Vite的rollupOptions来实现多HTML入口打包。

常见配置误区

许多开发者初次尝试时会直接在Vite配置的顶层添加rollupOptions属性，就像这样：

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

这种配置方式看似合理，但实际上会被Electron Forge忽略，导致只有默认的index.html被打包。

正确配置方法

正确的做法是将rollupOptions嵌套在build属性内部：

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

配置详解

1. build属性：这是Vite构建配置的核心对象，所有与构建相关的选项都应放在这里。

2. rollupOptions：Vite底层使用Rollup进行构建，这个选项允许我们直接配置Rollup的行为。

3. input配置：

   • 可以接受对象形式，键名将作为输出文件的标识
   • 每个值应该是HTML文件的绝对路径
   • 使用resolve方法确保路径正确性

开发与生产环境差异

值得注意的是，在开发模式下（npm start），即使配置不正确，多个HTML文件也可能正常工作。这是因为开发服务器直接基于文件系统提供服务。但在生产构建时（npm run package），只有正确配置rollupOptions才能确保所有HTML文件被打包。

最佳实践建议

1. 为每个窗口创建单独的HTML入口文件
2. 使用path.resolve确保路径准确性
3. 为每个入口指定有意义的名称，便于后续维护
4. 在package.json中检查Forge配置是否与Vite配置一致

通过以上配置，开发者可以轻松实现Electron应用的多窗口HTML打包，满足复杂应用场景的需求。