企业官网建设流程全解析

Vite 如何用 build.input 配置多页面应用构建？

【免费下载链接】viteNext generation frontend tooling. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite

在 Vite 项目中，vite build默认只以<root>/index.html作为构建入口，产出可静态托管的单应用包。当项目里除了index.html还有嵌套页面（例如nested/index.html）也需要参与构建时，就需要把多个.html文件声明为入口。做法是在vite.config.js中通过input选项列出全部入口，然后运行vite build。需要注意：文档中多页面示例使用的是顶层input选项，而不是build.input；build 配置文档明确建议优先设置顶层input，因为它在开发阶段同样生效；如果设置了build.rolldownOptions.input，它会覆盖顶层input且仅作用于构建。

准备条件：目录结构

构建文档的 Multi-Page App 章节给出的示例结构如下：

├── package.json ├── vite.config.js ├── index.html ├── main.js └── nested ├── index.html └── nested.js

开发阶段不需要任何额外配置：直接访问或链接到/nested/即可，行为和普通的静态文件服务器一致。input配置只在构建阶段才需要。

配置多个 HTML 入口

在vite.config.js中把每个.html文件加入input对象：

import { resolve } from 'node:path' import { defineConfig } from 'vite' export default defineConfig({ input: { main: resolve(import.meta.dirname, 'index.html'), nested: resolve(import.meta.dirname, 'nested/index.html'), }, })

• 键名（main、nested）是入口别名，值用resolve拼出绝对路径，基准是vite.config.js所在目录。
• 顶层input的类型为string | string[] | { [entryAlias: string]: string }，路径相对项目根目录解析。
• 顶层input同时充当build.rolldownOptions.input、build.lib.entry、build.ssr（为true时）以及optimizeDeps.entries的默认值，因此不用在这些选项中重复声明入口。

如果你指定了非默认的root，注意import.meta.dirname仍然是vite.config.js所在文件夹，因此要把root加进resolve的参数中。

执行构建并核对 dist 结构

配置完成后运行：

vite build

检查dist目录中的 HTML 文件名与位置。文档说明：对于 HTML 文件，Vite 会忽略input对象中给定的入口别名，而是按文件解析后的 id 来生成 dist 中的 HTML 资产——上例中dist内会保持index.html与nested/index.html的层级，与开发服务器的工作方式一致。也就是说入口别名不会改写出dist/main.html之类的文件，dist 结构与开发时的访问路径对齐。

两种 input 选项的取舍

仓库内 playground/multiple-entrypoints/vite.config.js 提供了一个真实的多入口配置参考，它用input对象同时列出了 20 多个 JS 入口和一个index.html入口，适合查看多入口写法与实际使用场景的对应关系。

非 HTML 入口的限制

如果自定义入口不是 HTML 文件，注意 build 配置文档指出：模块预加载 polyfill 默认只自动注入到每个index.html入口的代理模块中；使用build.rolldownOptions.input配置非 HTML 自定义入口时，需要在自己的自定义入口中手动导入该 polyfill。

更多构建行为（浏览器兼容性、base公共路径等）见 Building for Production，入口与项目根目录的关系见 Index and Project Root。

【免费下载链接】viteNext generation frontend tooling. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite