Vercel网站部署失败求助：API配置及.env文件设置问题

核心问题定位 #

直接在consts/index.js硬编码API URL和token，既存在敏感信息泄露风险，也可能导致Vercel部署时无法正确识别配置；迁移.env文件失败通常是配置格式、框架规则或Vercel环境变量同步环节出了问题。

分步解决步骤 #

1. 本地.env文件规范配置 #

• 在项目根目录创建.env.local（本地开发用）和.env.production（生产部署用）文件
• 按KEY=VALUE格式写入敏感信息，示例：

  NEXT_PUBLIC_API_URL=https://your-api-domain.com
  API_TOKEN=your-secret-token-here
  

  注意：前端需直接访问的变量必须添加框架要求的前缀（如Next.js用NEXT_PUBLIC_，Vue项目需在vue.config.js中配置暴露）；后端专属变量无需前缀。

• 务必在.gitignore中添加.env*规则，防止敏感信息提交到代码仓库

2. 代码中正确读取环境变量 #

修改consts/index.js，替换硬编码内容：

// consts/index.js
export const API_URL = process.env.NEXT_PUBLIC_API_URL;
export const API_TOKEN = process.env.API_TOKEN;

3. Vercel控制台同步环境变量 #

• 登录Vercel控制台进入目标项目
• 左侧菜单选择Settings -> Environment Variables
• 点击Add按钮，逐个添加本地.env中的键值对，确保Production环境已勾选
• 完成后重新触发部署：在Deployments页面选中失败的部署，点击Redeploy并勾选Use existing Build Cache

4. 常见故障排查 #

• 检查环境变量名称是否完全匹配（大小写敏感）
• 确认前端变量是否添加了框架要求的前缀
• 查看Vercel部署日志：进入失败部署的Build或Serverless Function日志，定位具体报错（如变量未定义、API请求失败等）
• 若为特定框架项目（React/Vue/Svelte），核对框架官方文档中环境变量的读取规则

内容的提问来源于stack exchange，提问作者Erdenay Karataş