JavaScript Vite 多页面怎么配置-js教程-PHP中文网

在 vite 中配置多页面应用，核心做法是在 vite.config.js 中使用 rollupinput 选项传入一个包含多个入口文件的对象，并为每个入口指定对应的 html 模板和输出文件名。这样 vite 会自动为每个页面生成独立的构建产物，实现多页应用的打包。

JavaScript Vite 多页面怎么配置

如何定义多个入口文件并关联各自的 HTML 模板？

通过配置 build.rollupOptions.input 对象来定义多个入口，Vite 会根据键名自动查找对应的 HTML 文件作为模板。例如，定义 index 和 about 两个入口，Vite 会分别读取 src/index.html 和 src/about.html 进行构建。

JavaScript Vite 多页面怎么配置

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

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

运行 npx vite build 后，会在 dist 目录下生成 index.html 和 about.html 两个文件，以及各自对应的 JS 和 CSS 资源。

多页面之间如何共享公共代码以避免重复打包？

Vite 默认使用 Rollup 进行打包，可以通过配置 build.commonjsOptions 或使用插件来优化公共代码提取。更直接的方式是利用 Rollup 的 manualChunks 功能，将第三方库或公共模块单独打包成一个 chunk，从而在多个页面间共享。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

JavaScript Vite 多页面怎么配置

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

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        index: path.resolve(__dirname, 'src/index.html'),
        about: path.resolve(__dirname, 'src/about.html'),
      },
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

上述配置会将所有 node_modules 中的依赖打包成名为 vendor 的公共 chunk，多个页面引用同一个 vendor.js，减少重复加载。

当某个入口文件不存在时 Vite 会如何处理？

如果 build.rollupOptions.input 中指定的 HTML 模板文件路径不存在，Vite 在启动开发服务器或执行构建时会直接报错，提示找不到该文件。例如，若配置了 contact 入口但 src/contact.html 未创建，控制台会显示类似 Could not resolve entry module "src/contact.html" 的错误，导致构建失败。因此，必须确保所有配置的入口文件实际存在，且路径正确。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南