如何在Angular(Ionic)应用中正确获取Vercel环境变量？

核心原因 #

Angular采用静态编译机制，浏览器环境中不存在process或未配置的import.meta.env对象。Vercel的环境变量需要在构建阶段通过Angular的配置体系注入到代码中，直接引用会导致变量未定义或无法获取正确值。

可行解决方案 #

方案一：环境文件占位符 + Vercel构建命令替换 #

1. 配置环境文件：在src/environments/environment.prod.ts中定义占位变量：

export const environment = {
  production: true,
  supabaseUrl: 'SUPABASE_URL_PLACEHOLDER',
  supabaseKey: 'SUPABASE_KEY_PLACEHOLDER'
};

2. Vercel环境变量设置：在Vercel项目的「Settings > Environment Variables」中添加SUPABASE_URL和SUPABASE_KEY，值为你的Supabase实例信息。
3. 修改构建命令：在项目根目录的package.json中替换build脚本，用sed在构建前替换占位符：

{
  "scripts": {
    "build": "sed -i 's/SUPABASE_URL_PLACEHOLDER/'\"$SUPABASE_URL\"'/g' src/environments/environment.prod.ts && sed -i 's/SUPABASE_KEY_PLACEHOLDER/'\"$SUPABASE_KEY\"'/g' src/environments/environment.prod.ts && ionic build --prod"
  }
}

Vercel的构建环境为Linux，sed命令可直接生效。

方案二：Angular ESBuild Define配置（推荐） #

1. 修改angular.json：找到projects > [你的应用名] > architect > build > configurations > production，添加define配置项，将环境变量绑定到process.env：

"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "define": {
    "process.env.SUPABASE_URL": "\"${SUPABASE_URL}\"",
    "process.env.SUPABASE_KEY": "\"${SUPABASE_KEY}\""
  },
  // 保留其他原有配置
}

2. 更新环境文件：在environment.prod.ts中直接引用process.env：

export const environment = {
  production: true,
  supabaseUrl: process.env.SUPABASE_URL,
  supabaseKey: process.env.SUPABASE_KEY
};

构建时Angular会自动将${SUPABASE_URL}替换为Vercel中设置的实际值，编译到静态代码里。

方案三：Angular 17+ import.meta.env 配置 #

1. 配置angular.json：在build > options中添加allowedEnv，指定允许注入的环境变量：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 其他原有配置
    "allowedEnv": ["SUPABASE_URL", "SUPABASE_KEY"]
  }
}

2. Vercel变量命名：将环境变量命名为NG_SUPABASE_URL和NG_SUPABASE_KEY（Angular默认识别NG_前缀的变量，或通过allowedEnv自定义）。
3. 引用变量：在environment.prod.ts中使用import.meta.env：

export const environment = {
  production: true,
  supabaseUrl: import.meta.env.NG_SUPABASE_URL,
  supabaseKey: import.meta.env.NG_SUPABASE_KEY
};

关键排查步骤 #

• 确认Vercel环境变量的Scope设置为「All Environments」或对应生产环境，且类型为「Build Time」（默认即为构建时注入）。
• 在Vercel构建日志中添加echo $SUPABASE_URL命令，验证变量是否被正确传递。
• 代码中始终通过environment对象引用变量，避免直接在组件/service中使用process.env或import.meta.env。

适配Supabase初始化场景 #

在AuthenticationService中直接导入并使用environment变量即可：

import { environment } from '../environments/environment';
import { createClient } from '@supabase/supabase-js';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  private supabase = createClient(environment.supabaseUrl, environment.supabaseKey);
  
  // 其他业务逻辑代码
}

内容的提问来源于stack exchange，提问作者Antonio Manuel Mancera Hevilla