如何使用 Vite 或 Svite 在 Svelte 中加载环境变量

Question

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

Answer 1

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

我利用dotenv and $lib provided by SvelteKit.

下面是我的文件夹结构和相关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_* 变量..

Answer 2

警告

VITE_ 前缀会将敏感信息暴露给客户端！ More info

通常情况下，我会简单地删除这个答案，但很明显整个 import.meta.env.VITE_SECRET_PASSWORD 并不是一个聪明的设计。根据 https://vitejs.dev/guide/env-and-mode.html#env-files 处的安全说明警告，使用不安全的 .env 变量有什么意义？？

作为开发人员，我的期望是我可以使用 .env 变量来存储安全信息。

让这个答案成为一个警告：不要这样做。

下面是我的原回复：

我在这里挣扎了一段时间..

环境变量文件，必须命名为.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 或 Svite 在 Svelte 中加载环境变量

How to load environment variables in Svelte using Vite or Svite

environment-variables

svelte

dotenv

vite

警告

下面是我的原回复：