如何在 sveltekit 中定义 BASE_URL？

Question

我想将用于生产和开发的 BASE_URL 定义为要在 API 调用中使用的环境变量，如下所示：

DEV_BASE_URL="http://127.0.0.1:8080"
PROD_BASE_URL="https://example.com"

我已在.env文件中定义它们，然后在我的组件中尝试导入它们，如下所示：

import {env} from '$env/dynamic/public'
console.log('DEV_BASE_URL is:', env.DEV_BASE_URL) 

但我进入DEV_BASE_URL is: undefined了控制台。

关于不同类型环境的文档让我更加困惑。文档太糟糕了。

因此，感谢您帮助以惯用的方式解决这些全局变量。

Answer 1

• 首先，我们将.env内容更改如下

PUBLIC_DEV_BASE_URL="http://127.0.0.1:8080"
PUBLIC_PROD_BASE_URL="https://example.com"

• 然后在你的svelte文件中像这样导入它们

PUBLIC_DEV_BASE_URL="http://127.0.0.1:8080"
PUBLIC_PROD_BASE_URL="https://example.com"

• 要根据服务器模式加载环境变量，您应该.env为每种模式创建一个文件，在本例中production | development如下所示

.env.development

PUBLIC_BASE_URL="http://127.0.0.1:8080"

.env.生产

PUBLIC_BASE_URL="https://example.com"

• 现在你只需导入该变量并使用

import { PUBLIC_DEV_BASE_URL, PUBLIC_PROD_BASE_URL } from '$env/static/public'

有关如何Sveltekit处理环境变量的更多信息，请查看文档https://kit.svelte.dev/docs/modules#$env-static-public

有关如何Vite处理环境变量的更多信息，请查看此链接https://vitejs.dev/guide/env-and-mode.html#modes