vite-plugin-html通过EJS模板语法在构建时动态注入标题、元信息等数据，支持单页动态配置和多页面独立入口，兼顾SEO与开发灵活性。
在 Vite 中，HTML 模板默认是手动维护的 index.html 文件，它本身不支持“自动生成模板”或“动态页面标题”的内置能力。但你可以通过组合 Vite 插件、构建时注入和运行时逻辑，实现类似效果。关键不是让 Vite 自动生成 HTML 文件（它不这么做），而是在已有 index.html 基础上，动态注入标题、元信息或按路由生成多页 HTML。
以下是几种实用且主流的实现方式：
使用 vite-plugin-html 注入动态标题
这是最轻量、最常用的方式：在构建时将变量注入到 index.html 中。
-
安装插件
立即学习“Java免费学习笔记（深入）”；
npm add -D vite-plugin-html
-
在
vite.config.ts中配置import { defineConfig } from 'vite' import { injectHtml } from 'vite-plugin-html'
export default defineConfig({ plugins: [ injectHtml({ inject: { data: { title: '我的应用', description: '一个基于 Vite 的现代前端项目' } } }) ] })
3. 修改 `index.html`，使用 EJS 语法占位
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title><%= title %></title>
<meta name="description" content="<%= description %>" />
</head>
<body>
<div id="app"></div>
</body>
</html>构建后，<title> 会变成 <title>我的应用</title>。注意：这只是构建时静态注入，不支持运行时切换。
多页面应用（MPA）中为不同入口生成独立 HTML
如果你需要多个 HTML 页面（如 /login.html、/admin.html），可以用 vite-plugin-multi-page 或手动配置 rollupOptions.input + vite-plugin-html。
例如，配置两个入口：
// vite.config.ts
export default defineConfig({
build: {
rollupOptions: {
input: {
main: './src/main.ts',
login: './src/login.ts'
}
}
},
plugins: [
injectHtml({
// 对每个入口分别注入
include: ['main', 'login'],
inject: {
data: (entryName) => ({
title: entryName === 'main' ? '首页' : '登录页',
description: entryName === 'main' ? '主应用' : '用户登录'
})
}
})
]
})配合 index.html 的 EJS 占位，Vite 会为每个入口生成对应 HTML（需搭配 vite-plugin-html 的多入口支持）。
运行时动态更新页面标题（SPA 场景）
对于单页应用（Vue/React），标题通常由路由决定。你不需要构建时注入，而是在组件或路由守卫中设置：
-
Vue Router（
router.afterEach）：router.afterEach((to) => { document.title = to.meta.title ?? '默认标题' }) -
React Router（
useEffect）：useEffect(() => { document.title = route.title || '默认标题' }, [route.title])
确保你在路由配置中声明了 title 字段：
{ path: '/about', element: <About />, meta: { title: '关于我们' } }注意事项与常见坑
- Vite 不解析
index.html中的 JS 表达式（如document.title = ...）来影响构建输出；它只处理 EJS 风格的<%= %>注入（依赖插件支持）。 -
vite-plugin-html默认使用 EJS，不要混用其他模板语法（如 Handlebars）除非显式配置。 - 开发时
index.html的标题不会随injectHtml动态刷新——它只在 build 时生效；开发阶段建议靠运行时逻辑控制。 - 如果用了 SSR（如 Vite + Vue SSR），标题管理应交由服务端渲染逻辑统一处理，避免客户端覆盖。
不复杂但容易忽略：构建时注入适合 SEO 友好的静态标题，运行时更新适合交互频繁的 SPA。两者可以共存，但需明确职责边界。
