在 vite 项目中，html 插件通过 `vite.config.js` 的 `plugins` 数组注册，利用 `transformindexhtml` 钩子在构建时修改 html 内容。以 vite-plugin-html 为例，调用 createhtmlplugin 并配置 title、inject 等参数，即可自动注入 meta 标签或模板变量。

vite-plugin-html 如何注入 Meta 和 Title

使用 vite-plugin-html 可以在 index.html 中直接引用环境变量，并在构建时替换为实际值。通过 inject 配置项，可以自动插入 script 或 link 标签，无需手动修改 HTML 文件。

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

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          title: 'My App',
          description: 'A Vite app'
        }
      }
    })
  ]
});

预期结果：index.html 中的

被替换为 ，且 head 中自动注入描述 meta 标签。

Vite 原生插件如何自定义 HTML 处理

如果不依赖第三方库，可以编写原生 Vite 插件，通过 transformIndexHtml 钩子直接操作 AST 或字符串。这种方式更灵活，适合需要复杂逻辑的场景。

Java 开发专家

精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo

下载

export function customHtmlPlugin() {
  return {
    name: 'custom-html',
    transformIndexHtml(html) {
      return html.replace('<title></title>', '<title>Custom</title>');
    }
  };
}

预期结果：构建后的 HTML 标题变为 Custom，且无额外依赖。

当 inject.data 为空对象时会发生什么

如果 inject.data 配置为空对象，vite-plugin-html 不会注入任何变量，但依然会执行 minify 压缩。此时 HTML 内容保持不变，仅进行格式优化。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南