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

Question

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

Answer 1

安全问题似乎有些混乱，但实际上很简单。

如果您想使用不敏感信息，请按以下步骤操作：

• 创建一个.envand/or .env.local,.env.production文件，在此处阅读更多信息https://vitejs.dev/guide/env-and-mode.html#env-files
• VITE_<some name>例如命名您的变量VITE_API_URL以存储您的后端位置。这不是敏感信息，因此可以通过您的 Svelte 应用程序将其公开到互联网上。
• 然后您可以直接在 svelte 的脚本标签内访问它，如下所示：import.meta.env.VITE_API_URL

如果您有敏感信息：

那么你不应该在一个精简的客户端中公开它......请不要做像 Saad 的答案中建议的那样并向公众公开你的 API 密钥！相反，您需要一台服务器来安全地保存该信息，但如何设置服务器又是一个不同的主题。

Answer 2

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

\n

我使用dotenv并由SvelteKit$lib提供。

\n

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

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 sveltekit-project/        // Root\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib/\n|   |   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 env.js\n|   |   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 other.js\n|   |   |   ... \n|   |   |   \n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 routes/\n|   |   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.svelte\n|   |   |   ...\n|   |   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.html\n|   |   ...\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .env\n

\n

/** /src/lib/env.js **/\nimport dotenv from \'dotenv\'\n\ndotenv.config()\n\nexport const env = process.env\n

\n

/** /src/lib/other.js **/\nimport { env } from \'$lib/env\'\n\nconst secret = env.YOUR_SECRET\n

\n

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

\n