如何在Vue/Vite+AWS Amplify项目中正确引用Secret环境变量

1. 直接错误原因：Vite不支持process.env #

Vite项目中不存在process全局对象，它使用import.meta.env替代process.env作为环境变量的读取方式，这是你遇到process未找到报错的核心原因。

2. 检查Amplify环境变量命名规范 #

Amplify前端环境变量需要满足以下规则才能被正确注入代码：

• 变量名必须以VITE_开头（Vite仅识别带该前缀的环境变量）
• 若使用Amplify Secrets存储，需确保变量在构建阶段被配置为可暴露给前端

3. 具体修复操作 #

步骤1：修正Amplify中的变量名 #

将原有的AMPLIFY_SIWA_CLIENT_ID和AMPLIFY_SIWA_PRIVATE_KEY，修改为VITE_SUPABASE_URL和VITE_SUPABASE_ANON_KEY（或其他以VITE_开头的名称，对应你的Supabase地址和匿名密钥），并保持Secret类型配置。

步骤2：替换代码中的变量引用方式 #

把代码里的process.env.secrets替换为import.meta.env对应变量，示例：

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

const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

步骤3：验证Amplify构建配置 #

• 进入Amplify控制台对应应用 → 环境变量 → 管理变量，确认修改后的VITE_前缀变量已正确设置
• 查看构建日志，确认SSM Secrets模块已加载目标变量

步骤4：本地验证（可选） #

在项目根目录创建.env.local文件，添加测试变量：

VITE_SUPABASE_URL=你的Supabase项目地址
VITE_SUPABASE_ANON_KEY=你的Supabase匿名密钥

运行npm run dev，验证本地代码能否正常读取变量，排除代码本身的问题。

4. 关键注意事项 #

• 前端仅能使用Supabase的匿名密钥（anon key），禁止暴露服务端密钥（如service_role密钥）
• Amplify的Secret变量会在构建时注入到静态文件中，确保仅将前端安全可用的变量配置为可访问

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