JavaScript 中怎么在 Vite 中配置自动生成 HTML 模版与页面标题-js教程-PHP中文网

vite-plugin-html通过ejs模板语法在构建时动态注入标题、元信息等数据，支持单页动态配置和多页面独立入口，兼顾seo与开发灵活性。

javascript 中怎么在 vite 中配置自动生成 html 模版与页面标题

在 Vite 中，HTML 模板默认是手动维护的 index.html 文件，它本身不支持“自动生成模板”或“动态页面标题”的内置能力。但你可以通过组合 Vite 插件、构建时注入和运行时逻辑，实现类似效果。关键不是让 Vite 自动生成 HTML 文件（它不这么做），而是在已有 index.html 基础上，动态注入标题、元信息或按路由生成多页 HTML。

以下是几种实用且主流的实现方式：

使用 `vite-plugin-html` 注入动态标题

这是最轻量、最常用的方式：在构建时将变量注入到 index.html 中。

安装插件
```
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


  
    <meta charset="UTF-8"><title></title><meta name="description" content="<%= description %>"><div id="app"></div>

构建后，<title></title> 会变成 <title>我的应用</title>。注意：这只是构建时静态注入，不支持运行时切换。

多页面应用（MPA）中为不同入口生成独立 HTML

如果你需要多个 HTML 页面（如 /login.html、/admin.html），可以用 vite-plugin-multi-page 或手动配置 rollupOptions.input + vite-plugin-html。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

例如，配置两个入口：

// 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></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。两者可以共存，但需明确职责边界。