如何在 Svelte 中加载环境变量

Posted 2023-02-24

【中文标题】如何在 Svelte 中加载环境变量

【英文标题】：How to load environment variables in Svelte

【发布时间】：2021-09-29 09:40:15

【问题描述】：

我一直在尝试找出在 Svelte App 中为 API 配置实现环境变量的最佳实践。据我所知，我们必须使用 Vite 或 Svite 才能使其工作。谁能帮我找到解决办法？？

【参考方案1】：

我就是这样做的，但我敢打赌还有其他好的做法

我使用SvelteKit提供的dotenv和$lib。

下面是我的文件夹结构和相关js：

├── sveltekit-project/        // Root
|   ├── src/
|   |   ├── lib/
|   |   |   ├── env.js
|   |   |   ├── other.js
|   |   |   ... 
|   |   |   
|   |   ├── routes/
|   |   |   ├── main.svelte
|   |   |   ...
|   |   ├── app.html
|   |   ...
|   ├── .env

/** /src/lib/env.js **/
import dotenv from 'dotenv'

dotenv.config()

export const env = process.env

/** /src/lib/other.js **/
import  env  from '$lib/env'

const secret = env.YOUR_SECRET

顺便说一句，我建议您阅读“如何使用环境变量？”参与SvelteKit FAQ。它似乎与您所关心的非常相关，但恐怕这意味着需要一些解决方法而不是 VITE_* 变量..

【讨论】：

您的回答对 SvelteKit 很有用。但不幸的是，我正在为 Vanilla Svelte 寻找解决方案。如果可以的话，帮我解决这个问题。顺便说一句，非常感谢您的详细回答。

【参考方案2】：

我花了一些时间在这里挣扎..

环境变量文件，必须命名为.env:

VITE_SENDGRID_API_KEY=SG.9999999999....999999999999

我花了太多时间才发现 sendgrid.env 作为文件名不起作用。

我在 /src/lib 目录中添加了一个名为 env.js 的文件。以下是该文件的完整内容：

export const ENV_OBJ = 
    SENDGRID_API_KEY: import.meta.env.VITE_SENDGRID_API_KEY,
    TEST: "test, test, test"
;

然后当我在其他地方需要它时......

import  ENV_OBJ  from '$lib/env'
// console.log("API Key.test: ", ENV_OBJ.TEST);
sgMail.setApiKey(ENV_OBJ.SENDGRID_API_KEY);

我正在使用 SvelteKit、javascript 等...没有额外的 dotenv。保持简单，让它变得简单。

【讨论】：

不要这样做。具有 VITE_* 前缀的所有内容都可能在客户端包中公开。 vitejs.dev/guide/env-and-mode.html#env-files "由于暴露给您的 Vite 源代码的任何变量最终都会出现在您的客户端包中，因此 VITE_* 变量不应包含任何敏感信息。"

非常感谢@Kansuler，你的评论拯救了我的@ss，我不知道当我第一次了解 env vars 时，我是怎么错过 vite 文档中的安全通知的。在搜索如何访问 .svelte 文件中的环境变量时，我也很幸运来到这里 :)

通常我会删除这个答案，但正如@a3k 所示，这是一个有价值的警告，告诉你不要做什么。也许对我的原始回复进行“警告，不要这样做”的编辑可能是合适的。