无法在Netlify部署React+TypeScript+Vite+Supabase项目

云原生阿岚

2026-7-13

解决Netlify部署Supabase项目时supabaseUrl is required报错

核心问题

本地开发时Vite能读取.env变量，但Netlify部署时无法获取这些变量，原因是本地.env文件不会被Git提交，且部署环境需要单独配置变量。

具体解决步骤

在Netlify后台配置环境变量
本地.env文件不会被上传到Git，必须手动在Netlify项目后台添加变量：
1. 进入Netlify项目的「Site settings > Environment variables」
2. 添加两个变量：
  - 键：VITE_SUPABASE_URL，值：你的Supabase实例URL（不要带引号）
  - 键：VITE_SUPABASE_API_KEY，值：你的Supabase API密钥（不要带引号）
3. 添加完成后，手动触发一次重新部署（Netlify不会自动用新变量重建）
修正本地.env文件格式
Vite解析.env时不需要给变量值加引号，修改.env内容为：
```
VITE_SUPABASE_API_KEY=mySupabaseApiKey
VITE_SUPABASE_URL=mySupabaseUrl
```
带引号会导致变量值包含多余引号，部署时解析异常。
移除多余的dotenv依赖
Vite内置了.env文件解析能力，安装dotenv可能造成冲突，执行命令卸载：
```
npm uninstall dotenv
```

添加TypeScript环境变量类型声明
在项目根目录创建src/vite-env.d.ts文件，确保TS能正确识别环境变量：

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_SUPABASE_URL: string;
  readonly VITE_SUPABASE_API_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

确认构建命令正确性
检查package.json的build脚本是否为Vite构建命令：
```
"scripts": {
  "build": "vite build"
}
```
Netlify默认使用npm run build，确保该命令能触发Vite的生产构建，正确注入环境变量。