如何在客户端 Astro 中使用环境变量？答案

【问题标题】：How to use environement variable in client side Astro?如何在客户端 Astro 中使用环境变量？
【发布时间】：2022-11-20 03:41:29
【问题描述】：

我想使用存储在环境变量中的 api 密钥。我知道我可以直接把它放在 html 中（我不认为它是安全的，因为它是一个公钥）。但是我无法通过我的反应组件访问它。

useEffect(()=>{
      SetRecaptchaKey(import.meta.env.VITE_SITE_RECAPTCHA_KEY);
      console.log(recaptchaKey)
    });

在我的组件功能之外（上图）我有这个：

const key = import.meta.env;
console.log(key)

它在控制台中记录对象，它有我正在寻找的变量。

另一件事是，我有两个 VITE_... 变量和另一个变量。只有一个 VITE_.. 被加载（这是我想要的）但我不明白为什么。

提前致谢

【问题讨论】：

【解决方案1】：

为了在客户端 Astro 中使用环境变量，您需要在变量前加上“ASTRO_”前缀。例如，如果您有一个名为“TEST_VAR”的环境变量，您将在客户端 Astro 中以“ASTRO_TEST_VAR”访问它。

【讨论】：