Vite 支持在 index.html 中直接使用 %ENV_NAME% 语法注入环境变量，但需注意语法格式、引号处理及 .env 文件配置规范，避免因转义或分号导致值异常。
vue/vite 项目中，环境变量在构建时即可注入 `index.html`，但并非通过运行时 javascript（如 `import.meta.env`）访问，而是借助 vite 的 html 预处理机制实现静态替换——核心方式是使用 `%env_name%` 模板语法。
Vite（v4+）原生支持 HTML 文件中的环境变量替换。只要变量以 VITE_ 开头并定义在 .env 文件中，就能在 index.html 中通过 %VITE_MY_VAR% 形式被构建时直接文本替换。例如：
# .env VITE_API_URL=https://api.example.com VITE_APP_TITLE=My Awesome App
在 index.html 中这样使用：
<script>
// ✅ 正确：模板语法自动包裹为字符串字面量（无需手动加引号）
console.log('API URL:', '%VITE_API_URL%');
document.title = '%VITE_APP_TITLE%';
</script>构建后将被精确替换为：
<script>
console.log('API URL:', 'https://api.example.com');
document.title = 'My Awesome App';
</script>⚠️ 关键注意事项：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
不要在
.env值末尾加分号（;）：VITE_MY_VAR=Hello World;会导致分号被原样注入，引发 JS 语法错误； -
.env中无需加引号：VITE_MY_VAR="Hello World"或'Hello World'中的引号会被完全忽略，仅保留内部文本；推荐写法为VITE_MY_VAR=Hello World； -
不能在
<script></script>内混用 JS 表达式与模板语法：console.log(VITE_MY_VAR)会报错（未声明变量），因为%...%是纯文本替换，不是运行时变量； -
特殊字符需谨慎：若值含单/双引号（如
VITE_DESC=It's "awesome"），可能破坏 JS 字符串结构。此时建议改用 JSON 序列化或服务端渲染方案。
✅ 最佳实践示例（安全、可维护）：
<!-- index.html -->
<meta name="api-base-url" content="%VITE_API_URL%">
<script>
// 安全读取（避免内联脚本中的引号冲突）
const API_BASE = document.querySelector('meta[name="api-base-url"]').getAttribute('content');
fetch(`${API_BASE}/health`).then(r => r.json()).then(console.log);
</script>总结：Vite 的 %ENV_NAME% 替换是构建期、无逻辑的字符串替换，轻量高效，适用于 HTML 层静态注入；如需更复杂逻辑或运行时动态获取，请结合 import.meta.env 在 Vue/JS 组件中处理。
