Nuxt连接Supabase报错supabaseUrl is required，求排查解决

核心问题修正步骤 #

• 修正环境变量前缀：Nuxt 3中，客户端代码（如你的app.vue、utils/supabase.ts）可访问的环境变量必须以NUXT_PUBLIC_开头，修改.env.local文件：

  NUXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
  NUXT_PUBLIC_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
  

• 同步工具文件变量引用：在./utils/supabase.ts中对应修改环境变量名称：

  import { createClient } from "@supabase/supabase-js"
  
  const supabaseUrl = process.env.NUXT_PUBLIC_SUPABASE_URL!
  const supabaseKey = process.env.NUXT_PUBLIC_SUPABASE_KEY!
  
  export const supabase = createClient(supabaseUrl, supabaseKey)
  

• 重启Nuxt开发服务器：修改环境变量后必须重启项目，否则新变量不会被加载生效。

额外检查项 #

• 确认.env.local文件放在项目根目录，文件名无拼写错误
• 确保@supabase/supabase-js已正确安装（执行npm install @supabase/supabase-js）
• 从你的代码结构判断是Nuxt 3项目，若为Nuxt 2需改用VUE_APP_前缀，但当前场景不适用

内容的提问来源于stack exchange，提问作者firecase