Vite 中如何配置多入口？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

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

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

// www.javascriptcn.com code example
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
        about: path.resolve(__dirname, 'about.html'),
        contact: path.resolve(__dirname, 'contact.html'),
      },
    },
  },
});

创建对应的 HTML 文件：确保在项目根目录下存在 index.html、about.html 和 contact.html 等文件。
运行 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 可以轻松支持多入口文件的构建和开发。

Vite 中如何配置多入口？