如何在客户端Astro使用环境变量?

Question

我想使用存储在环境变量中的api键。我知道我可以直接把它放在html(我不认为这是坏的安全明智，因为它是一个公钥)。但是我无法在我的react组件中访问它。

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

在我的组件函数(上面)之外，我有这个:

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

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

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

Thanks in advance

Answer 1

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

Answer 2

不确定在最后一个答案之后是否更改了行为或文档，但您需要使用PUBLIC_作为前缀。

因此，如果您有一个名为TEST_VAR的环境变量，则需要将其重命名为PUBLIC_TEST_VAR，然后它应该可以在客户端组件中访问为PUBLIC_TEST_VAR。

例如Astro React组件中的import.meta.env.PUBLIC_TEST_VAR。

请注意，这个变量会在客户端代码中泄露!