Vite实现多页应用需规范目录结构、用绝对路径引用脚本、在vite.config.js中声明多个HTML入口；推荐src/pages/下按页面分目录，HTML中script用/src/pages/xxx/main.js格式，build.rollupOptions.input配置各页面index.html路径，可自动扫描生成，再配合vite-plugin-html注入页面标题与SEO信息。

在 Vite 中实现多页应用（MPA），关键不是改打包逻辑，而是让每个 HTML 成为独立入口，并确保开发时能热更新、构建后资源不混乱。核心就三点：规范目录结构、统一用绝对路径引用脚本、在 vite.config.js 里明确声明多个 HTML 入口。

页面目录结构要清晰

推荐把所有页面放在 src/pages/ 下，每个页面一个子目录，里面包含自己的 index.html 和入口 JS 文件：

• src/pages/home/index.html
• src/pages/home/main.js
• src/pages/about/index.html
• src/pages/about/main.js

HTML 中的脚本标签必须用以 / 开头的绝对路径，比如：

<script type="module" src="/src/pages/home/main.js"></script>

这样 Vite 才能在开发时正确定位模块做 HMR，避免 404。

立即学习“Java免费学习笔记（深入）”；

在 vite.config.js 中配置多个入口

通过 build.rollupOptions.input 对象，把每个页面的 index.html 显式注册为入口：

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 会为每个入口生成独立的 HTML 和对应 JS/CSS，输出结构类似：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

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

页面多了可以自动扫描入口

手动维护 input 容易漏，可用 Node.js 的 fs 模块自动收集 src/pages/ 下所有子目录的 index.html：

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()

以后增删页面，只要新建或删除 src/pages/xxx/ 目录，无需改配置文件。

额外建议：配合插件注入页面标题

每个页面可能需要独立的 <title> 和 SEO 元信息。可以用 vite-plugin-html 在构建时动态注入：

• 安装：npm install -D vite-plugin-html
• 在 vite.config.js 的 plugins 中加入：

import { createHtmlPlugin } from 'vite-plugin-html'

createHtmlPlugin({
  inject: {
    data: {
      title: '关于我们',
      description: '公司介绍页面'
    }
  }
})

再在 src/pages/about/index.html 中用 EJS 语法写：

<title><%= title %></title>
<meta name="description" content="<%= description %>">

这样每个页面就能拥有专属标题和元信息，兼顾开发效率与 SEO。