Vite + Electron 多页面应用：让 Vite 自动发现你的 HTML

前言

在开发具有多个窗口或视图的 Electron 应用时（例如主界面、设置页、关于页），我们通常会创建多个独立的 HTML 文件。标准的 Vite 配置要求我们在 vite.config.ts 的 build.rollupOptions.input 中为每一个 HTML 文件手动添加一个条目。

// vite.config.ts (手动配置)
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'src/renderer/index.html'),
        settings: resolve(__dirname, 'src/renderer/pages/settings.html'),
        about: resolve(__dirname, 'src/renderer/pages/about.html'),
        // 每新增一个页面，就要在这里加一行...
      },
    },
  },
  // ...
})

这种方式在页面数量少时还能接受，但随着项目规模扩大，手动维护这个列表不仅变得异常繁琐，还极易出错——要么是忘记添加新页面，要么是路径写错。那么，有没有一种方法能让 Vite 自动发现并打包我们所有的 HTML 页面呢？

答案是肯定的！我们可以利用 Node.js 的能力，在 Vite 配置文件中动态扫描指定目录，自动生成入口配置。

解决方案：动态扫描与自动化配置

我们的核心思路是：

1. 约定一个专门存放所有 HTML 页面的目录，例如 src/renderer/pages。
2. 使用 glob 这个强大的库来扫描该目录下的所有 .html 文件。
3. 将扫描结果动态转换成 Vite 需要的 input 对象格式。
4. 将这个自动生成的对象注入到 Vite 的构建配置中。

步骤一：安装 glob

首先，我们需要将 glob 添加到项目的开发依赖中。

# 使用 npm
npm install glob -D

# 使用 yarn
yarn add glob -D

# 使用 pnpm
pnpm add glob -D

步骤二：组织你的页面文件

为了让扫描更有效，建议采用清晰的目录结构。

src/
└── renderer/
    ├── index.html          # 主入口页面
    ├── main.ts
    └── pages/              # 约定好的多页面存放目录
        ├── settings.html   # 设置页面
        ├── settings.ts
        └── user/
            ├── profile.html # 嵌套的页面
            └── profile.ts

步骤三：改造 vite.config.ts

这是最关键的一步。我们将读取 pages 目录，并自动生成配置。

// vite.config.ts
import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
// 1. 从 glob 库导入同步扫描方法
import { globSync } from 'glob'

// --- 自动化多入口配置 ---

// 2. 定义存放所有 HTML 页面的目录的绝对路径
const pagesDir = path.resolve(__dirname, 'src/renderer/pages')

// 3. 使用 globSync 扫描该目录下所有层级的 .html 文件
// 它会返回一个相对路径数组，例如 ['settings.html', 'user/profile.html']
const pageEntries = globSync('**/*.html', { cwd: pagesDir })

// 4. 将文件路径数组转换为 Rollup 需要的 { key: value } 格式的 input 对象
const rollupInput = pageEntries.reduce((entries, page) => {
    // 从文件路径中解析出逻辑名称，例如 'settings.html' -> 'settings'
    const pageName = path.parse(page).name
    // 创建条目：{ settings: 'D:/.../src/renderer/pages/settings.html' }
    entries[pageName] = path.join(pagesDir, page)
    return entries
}, {} as Record<string, string>)


// --- Vite 主配置 ---

export default defineConfig({
  build: {
    rollupOptions: {
      // 5. 将动态生成的 input 对象应用到配置中
      input: {
        // 保留一个明确的主入口
        main: path.resolve(__dirname, 'src/renderer/index.html'),
        // 使用展开运算符，将 pages 目录下的所有页面自动加入构建入口
        ...rollupInput
      },
    },
  },
  plugins: [
    // 你的其他插件，例如 electron(...)
    electron({
      main: {
        entry: 'electron/main/index.ts',
      },
      // ...
    }),
  ],
})

优势总结

通过这种自动化配置，我们获得了巨大的好处：

• “即插即用”：未来你只需要在 src/renderer/pages 目录下新建或删除 HTML 文件，Vite 会在下次构建时自动包含或排除它们，无需再触碰配置文件。
• 降低心智负担：开发者可以专注于页面逻辑的实现，而不必担心构建配置的同步问题。
• 减少人为错误：消除了手动添加路径时可能出现的拼写错误或遗漏。
• 项目更整洁：vite.config.ts 变得更加简洁和具有声明性，而不是一个冗长的文件列表。

对于任何需要处理多个页面的 Vite + Electron 项目来说，这都是一个强烈推荐的、能够显著提升开发体验和项目可维护性的最佳实践。