Vite 如何用 build.input 配置多页面应用构建【免费下载链接】viteNext generation frontend tooling. Its 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.inputbuild 配置文档明确建议优先设置顶层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 选项的取舍选项适用场景顶层input文档推荐开发与构建共用build.rolldownOptions.input仅构建时需要覆盖入口时使用会覆盖顶层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. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Vite 如何用 build.input 配置多页面应用构建【免费下载链接】viteNext generation frontend tooling. Its 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.inputbuild 配置文档明确建议优先设置顶层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 选项的取舍选项适用场景顶层input文档推荐开发与构建共用build.rolldownOptions.input仅构建时需要覆盖入口时使用会覆盖顶层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. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
 的 API 用法、生命周期回调与双通道上传原理)
