JavaScript 中 Vite 怎么在多页应用中配置多个 HTML 入口实现独立页面构建-js教程-PHP中文网

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

javascript 中 vite 怎么在多页应用中配置多个 html 入口实现独立页面构建

在 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 中的脚本标签必须用以 / 开头的绝对路径，比如：

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

在 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，输出结构类似：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

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></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 语法写：

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