vite-plugin-html 可轻松实现自定义 html 模板注入，需模板文件+ejs语法+插件配置+变量传入三者对齐；通过 inject.data 传字符串变量，多页需 pages 数组逐个配置。
用 vite-plugin-html 就能轻松实现自定义 HTML 模板注入，核心是模板文件 + 插件配置 + 变量传入三者对齐，不写插件、不改 Rollup 输出逻辑也能完成。
安装并启用插件
先安装插件：
npm install vite-plugin-html --save-dev
然后在 vite.config.ts 中引入并注册：
- 确保
createHtmlPlugin()加入plugins: []数组 - 默认会读取
public/index.html，若模板不在该路径，需显式指定template选项
使用 EJS 模板语法写 HTML
把 public/index.html 改成支持 EJS 的写法，例如：
-
<title></title>—— 用于动态标题 <meta name="description" content="<%= description %>">- 注意：不要保留原始的
<script type="module" src="/src/main.ts"></script>，插件会自动注入入口脚本
在配置中传入变量
通过 inject.data 向模板注入数据：
inject: { data: { title: '我的网站', description: '一个前端小站' } }- 值必须是字符串或 JSON 字符串（如
JSON.stringify({ theme: 'dark' })），避免破坏 HTML 结构 - 空对象
{}不触发替换，至少传一个有效字段
多页面项目要单独配每个页
多个 HTML 入口时，不能只靠一个 inject，得用 pages 数组逐个声明：
- 每个项必须含
filename（输出名）、template（源模板路径）、entry（JS 入口） - 例如：
{ filename: 'admin.html', template: 'public/admin.html', entry: 'src/admin/main.ts' } - 所有
filename不能重复，否则后写的会覆盖前一个
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
