Vite 中如何配置多入口？

推荐答案

在 Vite 中配置多入口可以通过修改 vite.config.js 文件来实现。具体步骤如下：

1. 修改 vite.config.js 文件：在 vite.config.js 中，通过 build.rollupOptions.input 配置多个入口文件。

-- -------------------- ---- -------
------ - ------------ - ---- -------
------ ---- ---- -------

------ ------- --------------
  ------ -
    -------------- -
      ------ -
        ----- ----------------------- --------------
        ------ ----------------------- --------------
        -------- ----------------------- ----------------
      --
    --
  --
---

1. 创建对应的 HTML 文件：确保在项目根目录下存在 index.html、about.html 和 contact.html 等文件。

2. 运行 Vite：通过 vite 或 vite build 命令启动项目或构建项目。

本题详细解读

1. 多入口配置的背景

在传统的单页应用（SPA）中，通常只有一个入口文件（如 index.html）。但在某些场景下，我们可能需要多个入口文件，例如：

• 构建一个多页应用（MPA）。
• 为不同的页面或模块提供独立的入口。

Vite 通过 Rollup 的配置选项来支持多入口配置。

2. rollupOptions.input 的作用

rollupOptions.input 是 Rollup 的配置选项之一，用于指定构建时的入口文件。在 Vite 中，我们可以通过 build.rollupOptions.input 来配置多个入口文件。

3. 配置示例解析

在示例中，我们配置了三个入口文件：

• main：对应 index.html。
• about：对应 about.html。
• contact：对应 contact.html。

每个入口文件都通过 path.resolve 方法解析为绝对路径，确保 Vite 能够正确找到这些文件。

4. 注意事项

• HTML 文件路径：确保配置的 HTML 文件路径正确，否则 Vite 会报错。
• 资源引用：在多入口配置中，确保每个 HTML 文件正确引用了对应的 JavaScript 和 CSS 文件。
• 构建输出：构建时，Vite 会为每个入口文件生成对应的输出文件，确保输出目录结构符合预期。

通过以上配置，Vite 可以轻松支持多入口文件的构建和开发。