javascript - supabaseUrl 是必需的 sveltekit

Question

我遇到这个问题已经有一段时间了，想解决这个问题: 根据 supbase documentation你创建了一个.env 文件

VITE_SUPABASE_URL="YOUR_SUPABASE_URL"
VITE_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"

然后在 supabaseClient.js 中调用它们:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

但是这不起作用，我得到 supabaseUrl is required. 并且 env 变量没有被导出。

有谁知道为什么以及如何解决？

我需要安装任何额外的库吗？

提前致谢

Answer 1

SvelteKit 最近添加了新的商店来导入环境变量，比如 $env/static/private .使用:

# .env file
PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"
PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"

// supabaseClient.js

import { createClient } from '@supabase/supabase-js'   
import {PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY} from '$env/static/public'

export const supabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY)

这应该可行，但请注意，您的 secret 正在公开访问的 JS 文件中公开(因此 PUBLIC_ 前缀)。因此，最好只从 SvelteKit 端点访问 supabase(该教程没有这样做。)为此，您应该使用 $env/static/private 存储和环境变量 PUBLIC_ 前缀。 (您还必须将 supabase 代码重构为 Svelte 端点，而不是 Svelte 页面/组件。)

警告:SvelteKit API 在不断变化，最终的 v1.0 方法可能会大不相同。最新的 SvelteKit 已经引入了重大的突破性变化:

• https://github.com/sveltejs/kit/discussions/5748
• https://github.com/sveltejs/kit/discussions/5875

---

我以前使用过旧的 VITE_SUPABASE_URL + import.meta.env.VITE_SUPABASE_URL 方法，所以它应该可以工作。我不确定 SvelteKit 是否在引入新的环境变量存储时禁用了此方法。

更新:如果您想继续使用旧的import.meta.env.VITE_SUPABASE_URL 方法，可以通过设置envPrefix 来实现。在你的vite.config.js (来源:https://kit.svelte.dev/docs/configuration#env)