SvelteKit中如何在app.html里使用.env环境变量？

你之前用import { PUBLIC_KEY } from '$env/dynamic/public';的方式无效，是因为app.html是静态HTML模板，不属于Svelte组件或JS模块，SvelteKit的$env导入机制在这个阶段无法生效。以下是两种可行的解决方案：

方案一：构建时模板替换（推荐） #

SvelteKit支持在app.html中直接使用%PUBLIC_XXX%格式的占位符，构建时会自动替换为对应环境变量的值，前提是你的环境变量以PUBLIC_开头（公开变量）。

示例代码：

<!-- app.html -->
<script>
  // 直接使用占位符获取环境变量
  const publicKey = '%PUBLIC_KEY%';
  // 后续可正常使用该变量
  console.log('当前公钥：', publicKey);
</script>

方案二：全局变量挂载（运行时获取） #

如果需要在客户端运行时动态获取变量，可以通过根布局组件将环境变量挂载到全局window对象，再在app.html的脚本中访问：

1. 在根布局组件+layout.svelte中注入变量：

<script>
  import { PUBLIC_KEY } from '$env/dynamic/public';
  // 将变量挂载到全局window对象
  window.PUBLIC_KEY = PUBLIC_KEY;
</script>

2. 在app.html的脚本中访问全局变量：

<!-- app.html -->
<script>
  // 确保DOM加载完成后再访问，避免变量未挂载
  document.addEventListener('DOMContentLoaded', () => {
    const publicKey = window.PUBLIC_KEY;
    console.log('当前公钥：', publicKey);
  });
</script>

注意事项 #

• 只有前缀为PUBLIC_的环境变量能在客户端暴露，私有变量（无PUBLIC_前缀）禁止在客户端使用，会导致安全泄露。
• 方案一属于构建时静态替换，生成的HTML中直接是变量值，性能更好；方案二是运行时动态注入，适合需要根据运行环境调整的场景。

内容的提问来源于stack exchange，提问作者DavidF