在 SvelteKit（和 Vite）中使用环境变量

TypeScript

2022 年 8 月 8 日更新： SvelteKit 现在支持私有和公共环境变量，无需直接使用 Vite，因此请参考以下文档，而不是本文：

2022年4月13日更新：新的Svelte常见问题解答中已包含此信息（如果您感兴趣，我在这里会更详细地介绍一下）。

在 SvelteKit 中设置环境变量非常简单，只需.env在仓库根目录创建一个文件并添加一些内容即可：

VITE_MESSAGE="World"
SOME_PRIVATE_VAR="You can't see me"

然后，在您的路由或组件中使用import.meta.env.VAR：

<h1>Hello, {import.meta.env.VITE_MESSAGE}</h1>

这样就能得到“Hello, World”这句话。

重要提示：带有前缀的键VITE_可供组件、路由、端点和其他 JS/TS 代码访问。任何未带前缀的键都无法导入，以防止意外泄露键值。

如果你想用 TypeScript 来定义环境变量，可以ImportMetaEnv在你的global.d.ts文件中进行扩展：

interface ImportMetaEnv {
  VITE_MESSAGE: string
}

如果您想在端点或非 Svelte 代码中使用环境变量，并且不想遇到 TS 错误，则需要将以下内容添加"module": "es2020"到您的tsconfig.json：

{
  "compilerOptions": {
    "module": "es2020",
    // ...
  }
  // ...
}

任何以 `<environment>` 为前缀的环境变量，VITE_如果在 Svelte 组件中使用，都有可能泄露给客户端浏览器。为了确保潜在密钥的安全，请务必执行以下操作：

✅ 始终：仅在“端点”或其他服务器端代码（例如数据库连接字符串、身份验证令牌或密钥）中使用密钥。
🛑 绝对不要：在组件中执行类似这样的操作const env = import.meta.env，因为现在任何人都可以访问附加到该组件的所有值env。
🛑 绝对不要：在 Svelte 组件或路由中访问你的私有环境变量（例如，不要在组件中这样做console.log(import.meta.env.VITE_DATABASE_URL)：）。

Vite 会静态地替换任何环境变量的使用，因此import.meta.env.VITE_FOO会编译到"foo"假定你的文件中.env已包含该环境变量为止VITE_FOO="foo"。

注意：您不能使用动态访问键，例如，以下代码将无法工作：import.meta.env["VITE_MESSAGE"]。如果您需要动态变量，一种解决方案是使用svelte-preprocess'sreplace设置。

好了，今天就到这里，如果这篇文章对你有帮助，请点赞👍 / 🦄 / 🔖！

关注我的Dev.to、Twitter和Github账号，获取更多 Web 开发和创业相关内容🤓