Vite 构建中需用 vite-plugin-html 插件配合 EJS 语法实现 HTML 模板插值，变量在 index.html 中用 等形式声明，并在 vite.config.ts 的 createHtmlPlugin 中通过 inject.data 注入；必须避免混用 Thymeleaf 或 Vue 模板语法，且 HTML 模板须置于根目录或显式指定路径。
在 Vite 构建中配置自定义 HTML 模板插值，核心是使用 vite-plugin-html 插件，配合 EJS 语法在 index.html 中声明变量，并在 vite.config.ts 中注入具体值。Vite 本身不解析 HTML，必须依赖该插件完成构建时的静态替换。
确保使用正确的模板语法和文件位置
HTML 模板必须放在项目根目录（或 public/ 下），且默认入口为 index.html。在 HTML 中用 EJS 标签写变量，例如：
<title></title><link rel="icon" href="<%=%20favicon%20%>">-
（用于插入动态 script 标签）
注意：不要混用 Thymeleaf、Vue 模板语法（如 {{ }} 或 th:*），它们不会被 Vite 处理，会导致构建后原样输出、运行时报错或服务端渲染冲突。
安装并配置 vite-plugin-html 插件
执行安装命令：
立即学习“Java免费学习笔记（深入）”；
npm install vite-plugin-html --save-dev
在 vite.config.ts 中启用插件并注入数据：
- 基础单页配置（注入 title、favicon 等）：
import { createHtmlPlugin } from 'vite-plugin-html';export default defineConfig({ plugins: [ createHtmlPlugin({ minify: true, inject: { data: { title: '我的应用', favicon: '/favicon.ico', injectScript: '<script>console.log("loaded");</script>', } } }) ]});
支持多页与环境差异化注入
可通过 pages 配置生成多个 HTML 文件，每个页面独立模板和变量：
- 指定不同
template路径（如public/admin.html） - 按环境读取变量：用
process.env.NODE_ENV或import.meta.env.VITE_APP_NAME（需提前在.env中定义） - 示例：生产环境注入 GA 脚本，开发环境跳过
inject: { data: { gaScript: import.meta.env.PROD ? `<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXX"></script>` : '',}}
避免常见路径与构建失效问题
插值生效的前提是构建流程未被破坏：
-
index.html必须在项目根目录；若放public/，需显式设置template: 'public/index.html' - 不要修改
build.rollupOptions.output.entryFileNames后忘记匹配index入口名，否则插件无法定位 chunk 注入 script - 检查构建产物
dist/index.html，确认变量已被真实替换，而非仍显示 - 所有资源引用（
href/src）保持相对路径（如./assets/logo.png），避免因base配置不一致导致 404
