Vite+ClerkJS部署Vercel后环境变量失效问题求助

API 探路者

2026-7-19

解决Vite+ClerkJS部署Vercel后"Missing Publishable Key"错误

排查与修复步骤：

确认Vercel环境变量配置范围
进入Vercel项目的「Settings > Environment Variables」，检查变量VITE_REACT_APP_CLERK_PUBLISHABLE_KEY的Environment范围是否覆盖你的部署环境（如Production/Preview），仅配置Development环境的话，生产部署时变量不会生效。同时严格核对变量名的大小写、下划线，Vite要求客户端可访问的环境变量必须以VITE_为前缀。
触发重新构建部署
Vercel不会自动重新部署已有构建，修改环境变量后，需进入「Deployments」页面，找到最新部署记录点击「Redeploy」，并取消勾选「Use existing Build Cache?」，强制重新构建以注入新的环境变量。
验证环境变量注入情况
可在代码中临时添加日志（生产环境需后续移除），确认变量是否被正确读取：
```
console.log("Publishable Key:", import.meta.env.VITE_REACT_APP_CLERK_PUBLISHABLE_KEY);
```
部署后打开浏览器控制台，若输出undefined，说明变量未被正确注入，需重新检查Vercel的变量配置。
检查ClerkProvider传值
确保ClerkProvider组件正确传入密钥：
```
<ClerkProvider publishableKey={clerkPubKey}>
  {/* 应用内容 */}
</ClerkProvider>
```
传值错误也会导致密钥缺失的报错。
本地构建验证
本地执行npm run build，再通过serve dist启动构建产物，若本地也出现相同错误，说明问题出在本地.env文件配置或变量名书写错误；若本地正常，则问题集中在Vercel部署流程，需重新核对平台的变量配置与部署触发方式。