多页面应用的入口配置思路

在多页面应用中，每个 HTML 页面对应独立的入口文件。Vite 本身不直接支持多入口配置，需要借助 rollupOptions.input 手动指定多个入口。一种常见的做法是在 vite.config.ts 中通过对象形式列出所有入口，键为页面名称，值为入口文件路径。例如设置 input: { index: 'src/pages/index/index.html', about: 'src/pages/about/index.html' }。注意每个入口需指向 HTML 文件而非 JS 文件，Vite 会自动处理 HTML 中的 script 标签。这个思路适用于页面数量固定、结构清晰的场景。如果页面数量超过 5 个，手动列举容易遗漏或写错路径，建议结合动态生成方法。

确定页面结构并配置构建

配置时建议先确定页面结构：将每个页面放在独立的目录下，包含各自的 index.html、main.ts 及样式文件。然后在 vite.config.ts 的 build.rollupOptions.input 中添加所有页面路径。若页面数量较多，可以利用 Node.js 的 fs 模块读取 pages 文件夹动态生成 input 对象，避免手动枚举。动态生成时需注意过滤非文件夹项，并确保路径正确。例如，src/pages 下每个子目录代表一个页面，读取后生成如下配置：

import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';

const pagesDir = path.resolve(__dirname, 'src/pages');
const pages = fs.readdirSync(pagesDir).filter(dir =>
  fs.statSync(path.join(pagesDir, dir)).isDirectory()
);
const input = Object.fromEntries(
  pages.map(dir => [dir, path.join(pagesDir, dir, 'index.html')])
);

export default defineConfig({
  build: {
    rollupOptions: {
      input
    }
  }
});

这样即使新增页面，只需在 pages 下新建文件夹并放入 index.html，构建时会自动纳入。注意：动态生成时，每个页面目录下必须存在 index.html，否则会构建失败。

处理公共依赖和模板污染

一个容易忽略的问题是：当多个页面共享相同的依赖时（如 Vue、React 库），Vite 默认会将共享库打包到每个入口的 chunk 中，导致整体体积膨胀。解决办法是在 build.rollupOptions.output.manualChunks 中手动拆分公共模块，例如将 node_modules 中的依赖单独打包成一个 vendor chunk。另外，使用 HTML 插件（如 vite-plugin-html）时需注意每个页面单独的模板配置，避免变量污染。例如，不同页面的 title 或 meta 标签可能不同，如果复用同一个模板，需要插件支持 per-page 选项或手动传递参数。一个常见的做法是：在 vite.config.ts 中为每个入口单独配置模板变量：

import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      pages: [
        {
          filename: 'index.html',
          template: 'src/pages/index/index.html',
          injectOptions: {
            data: { title: '首页' }
          }
        },
        {
          filename: 'about.html',
          template: 'src/pages/about/index.html',
          injectOptions: {
            data: { title: '关于' }
          }
        }
      ]
    })
  ]
});

如果页面数量多，可以考虑动态生成 pages 数组，与 input 同步。

验证构建结果和资源路径

配置完成后可执行 vite build 进行构建。检查输出目录（通常为 dist）是否包含每个页面的独立 HTML 文件及对应的 JS/CSS 资源。打开每个 HTML 文件，确认链接指向正确的资源路径（相对路径或绝对路径需与 base 配置一致）。若资源加载失败，可能是 base 配置错误或入口路径不匹配。建议先以相对路径 dist/ 测试，再按部署环境调整 base。例如，如果部署到子路径 /app/，需要设置 base: '/app/'，否则资源路径会不对。构建完成后，我习惯在 dist 目录启动一个简单静态服务（如 npx serve dist）逐一打开每个 HTML，查看控制台有无 404 错误。这样能快速定位路径问题。

开发服务器的兼容性和路由策略

使用多页面配置时，需注意开发服务器（vite dev）的行为。默认情况下，dev server 只服务通过插件注册的 HTML 文件。若未显式配置 multi-page 插件（如 vite-plugin-multi-page），浏览器直接访问非根路径可能会 404。推荐在 dev 模式下使用插件自动识别页面，或手动重定向。例如，安装 vite-plugin-multi-page 后，它会扫描指定目录下的 HTML 文件并自动注册路由。如果不想引入插件，也可以手动在根目录的 index.html 中添加一个导航页面，或者通过 server.proxy 将特定路径指向对应 HTML。但更稳妥的做法是：将开发时的入口访问机制与生产构建保持一致，提前规划好路由策略。

另外，若使用 hash 路由的单页应用模式，多页面配置可能不兼容，因为每个 HTML 文件需要独立的 app 实例，而单页应用通常只挂载一个根实例。这种情况建议评估是否真的需要多页面：如果只是不同频道，可以考虑 SPA 的按需加载；如果强依赖独立 SEO 或独立入口，才采用多页面方案。总之，在项目初期就定好路由策略，避免后期重构。

一个小问题：配置完成后，如果开发环境某些页面访问时出现白屏，优先检查该页面的 HTML 模板是否正确引用了入口 JS。Vite 在 dev 模式下会注入 script 标签，但如果模板中没有 `` 这样的标记，页面不会自动加载脚本。手动确认每个页面的 index.html 都包含入口 script。