templateParameters 是 html-webpack-plugin 向 HTML 模板注入静态数据的机制，需传入 JSON 可序列化值，配合 EJS/HTML 语法使用，且必须在构建时预解构环境变量（如 API_HOST: process.env.API_HOST || '...'），不可直接写 process.env.API_HOST。
html-webpack-plugin 的 templateParameters 怎么用
它是最轻量、最通用的 HTML 注入方式，但只在构建时生效，且仅支持字符串/对象等 JSON 可序列化值。templateParameters 本质是把数据传给模板引擎（如 EJS、HTML 模板语法），不是运行时注入。
常见错误现象：htmlWebpackPlugin.options.templateParameters.API_HOST 在浏览器控制台报 undefined，或页面中渲染出原始模板语法（如 ）没被替换。
- 确保你用的是支持模板语法的 loader（如
html-loader或默认的html-webpack-plugin渲染逻辑），不要混用 EJS/Handlebars 而不配对应 loader -
templateParameters中的值必须是静态可求值的——不能写process.env.API_HOST直接进去，得先在外面解构出来：API_HOST: process.env.API_HOST || 'https://dev.example.com' - 在
index.html里用<script>window.API_HOST = ''</script>，注意单引号包裹，避免 JS 语法错误
HTMLWebpackInjectEnvPlugin 能否替代 DefinePlugin
不能替代，但能互补。DefinePlugin 只作用于 JS 模块内（编译期文本替换），对 HTML 文件完全无效；而 HTMLWebpackInjectEnvPlugin 专为 HTML 设计，把变量挂到 window.env 下，JS 和 HTML 都能读。
典型误用：以为装了这个插件就不用管 DefinePlugin 了。结果是 API 地址在 JS 里还是写死的，或者 fetch 时用了未定义的 window.env.API_HOST。
立即学习“前端免费学习笔记（深入）”；
- 该插件需显式配置要注入的环境变量白名单，比如
['API_HOST', 'APP_VERSION']，漏配就拿不到 - 它依赖 Webpack 的
html-webpack-plugin实例存在，如果项目用了多个 HtmlWebpackPlugin 实例，得给每个都传插件实例 - 生成的代码类似：
<script>window.env = {API_HOST:"https://prod.example.com"}</script>，所以务必确保它在你自己的 JS 执行前加载（一般放在<head>末尾或<body>开头）
vite-plugin-html 在 Vite 项目中怎么安全注入变量
这是 Vite 生态下最推荐的方式，语法简洁、类型友好、天然支持多环境，但容易忽略它的注入时机和转义规则。
错误现象：变量含特殊字符（如 "、<）导致 HTML 解析失败，或注入后 JS 报错 Uncaught SyntaxError: Invalid or unexpected token。
- 用
inject选项传对象时，插件默认不做 HTML 转义，所以字符串值必须手动 JSON.stringify —— 推荐写法：API_HOST: JSON.stringify(process.env.API_HOST) - 它支持函数式注入，适合需要动态计算的场景，例如：
title: () => `Admin - ${import.meta.env.PROD ? 'Prod' : 'Dev'}` - 别把敏感信息（如密钥）直接注入 HTML，即使只是构建时注入，也可能被爬虫或审计工具提取；这类变量应严格限制在 JS 内部，用
import.meta.env+define处理
纯静态部署时如何绕过构建工具注入变量
当没有 Webpack/Vite，只有 Nginx/Apache 静态托管，又需要不同环境切 API 地址时，<script src="env.js"></script> 是最可靠方案，但细节决定成败。
典型翻车点：变量名污染全局作用域、env.js 加载失败后 JS 报错中断、跨域或缓存导致旧变量残留。
-
env.js内容必须是合法 JS 赋值语句，且不带声明关键词：API_HOST = "https://staging.example.com"; APP_ENV = "staging";（不要用const或let） - HTML 中必须按顺序放置：
<p id="status"></p>→<script src="env.js"></script>→<script>if (typeof API_HOST !== "undefined") { ... }</script> - 加个简单 fallback：
window.API_HOST = window.API_HOST || "https://default.example.com"，避免后续逻辑因变量缺失崩掉
实际工程中最容易被忽略的，是「注入点与消费点的执行时序」和「变量值的可序列化边界」。哪怕配置全对，只要脚本加载顺序错一位，或值里多了个换行符，window.env 就会是 undefined。
