JavaScript 中怎么在 Vite 中配置多页面应用 MPA 构建结构-js教程-PHP中文网

vite 配置多页面应用需将每个 html 设为独立入口，统一放于 src/pages/ 下并用绝对路径引用脚本；在 vite.config.js 中通过 build.rollupoptions.input 指定各页面 index.html 路径，支持手动配置或 fs 自动扫描。

javascript 中怎么在 vite 中配置多页面应用 mpa 构建结构

在 Vite 中配置多页面应用（MPA），核心是让每个 HTML 页面成为独立构建入口，并确保开发和生产环境都能正确加载各自资源。不需要改写底层逻辑，关键在目录结构、HTML 引用路径和 vite.config.js 的 build.rollupOptions.input 配置。

明确页面入口与目录结构

每个页面应有自己完整的 HTML 文件，建议统一放在 src/pages/ 下，按页面命名建子目录：

src/pages/home/index.html
src/pages/about/index.html
src/pages/contact/index.html

每个 index.html 中的脚本引用必须使用绝对路径（以 / 开头），例如：

这样 Vite 才能正确定位模块并做 HMR 和构建处理。避免相对路径或未加前缀的路径，否则开发时可能报 404。

配置 vite.config.js 指定多个入口

在 vite.config.js 中通过 build.rollupOptions.input 显式声明每个页面的 HTML 入口：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

import { defineConfig, resolve } from 'vite'
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        home: resolve(__dirname, 'src/pages/home/index.html'),
        about: resolve(__dirname, 'src/pages/about/index.html'),
        contact: resolve(__dirname, 'src/pages/contact/index.html')
      }
    }
  }
})

构建后，Vite 会为每个入口生成独立的 JS/CSS 资源，并保留对应 HTML 文件，输出结构类似：

dist/
  home/
    index.html
  about/
    index.html
  contact/
    index.html
  assets/...（共用或按需拆分的资源）

可选：自动化扫描 HTML 入口

当页面数量变多时，手动维护 input 容易出错。可用 Node.js 的 fs 模块自动收集：

const fs = require('fs')
const path = require('path')

const getPages = () => {
  const pagesDir = path.resolve(__dirname, 'src/pages')
  const dirs = fs.readdirSync(pagesDir, { withFileTypes: true })
    .filter(d => d.isDirectory())
    .map(d => d.name)
  return Object.fromEntries(
    dirs.map(dir => [
      dir,
      path.resolve(__dirname, `src/pages/${dir}/index.html`)
    ])
  )

然后在配置中直接使用：input: getPages()。这种方式适合中大型 MPA 项目，后续增删页面只需增减目录，无需改配置。