Sveltekit、Supabase 和 Vercel（在将 Supabase 部署到 Vercel 时遇到问题）

Question

我正在尝试搭建Sveltekit、Supabase和Vercel环境。在本地环境（SvelteKit和Supabase）中可以正常工作，但是当我将其部署到Vercel时，出现了Supabase的问题 - "Error: supabaseUrl is required"（我在下面发布了一张截图）。如果不使用Supabase，则部署到Vercel没有任何问题。请问是否有人遇到过类似的问题或者有什么建议可以分享。

- Todor Markov

Answer 1

我终于搞定了这个问题，通过从一些来源中拼凑出来的方法。

首先，在Vercel中添加与.env文件中完全相同的环境变量，例如：VITE_SUPABASE_URL和VITE_SUPABASE_ANON_KEY以及它们的值。

接下来，在svelte.config.js文件中添加一些代码。该文件的结果如下：

import adapter from '@sveltejs/adapter-auto'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    vite: {
      define: {
        'process.env': process.env,
      },
    },

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
  },
}

export default config

我将项目重新部署到Vercel上，现在可以正常运行了。

- Brad Mehder

---

仅在 Vercel 中使用环境变量。 - Ricardo de Paula

Answer 2

你应该将你的Supabase URL 和 Supabase ANON KEY 添加到 Vercel 中，并遵循以下格式：VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY，如果你已经按照 Supabase 指南进行了初始化。

除了将配置添加到您的svelte.config.js文件中之外，如果您添加了此文件，您应该强调将环境变量添加到您的 Vercel 环境中。

// utils/supabase.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)

- Abhijith Ganesh