如何在Vercel上为Vite的开发与生产环境配置不同的VITE_APP_API_URL

方案一：Vercel环境变量+动态Rewrite（推荐） #

无需修改前端任何请求代码，完全通过Vercel配置实现环境隔离：

1. 给两个Vercel项目分别配置环境变量

   • 开发项目（关联dev分支）：添加环境变量 VERCEL_API_TARGET，值为 https://api-url.development.com
   • 生产项目（关联main分支）：添加环境变量 VERCEL_API_TARGET，值为 https://api-url.production.com

   注意：变量不需要加VITE_前缀，仅用于Vercel的rewrite规则

2. 修改vercel.json的rewrites规则，使用环境变量占位符

   {
     "rewrites": [
       {
         "source": "/api/:path*",
         "destination": "${VERCEL_API_TARGET}/api/:path*"
       },
       {
         "source": "/:path((?!\\.).*)",
         "destination": "/"
       }
     ]
   }
   

3. 前端请求统一用相对路径
   所有API请求都写成 /api/xxx 形式，Vercel会根据当前项目的VERCEL_API_TARGET变量，自动转发到对应的后端地址。

方案二：Vite构建时注入环境变量 #

如果需要前端直接使用完整API地址，可通过Vercel环境变量+Vite构建注入实现：

1. 给两个Vercel项目分别配置Vite兼容的环境变量

   • 开发项目：添加环境变量 VITE_APP_API_URL，值为 https://api-url.development.com
   • 生产项目：添加环境变量 VITE_APP_API_URL，值为 https://api-url.production.com

   Vercel会自动把以VITE_开头的变量暴露给Vite构建过程

2. 前端代码中直接使用注入的变量

   // 发起请求示例
   fetch(`${import.meta.env.VITE_APP_API_URL}/user/list`)
     .then(res => res.json())
     .then(data => console.log(data))
   

   Vite在构建时会把import.meta.env.VITE_APP_API_URL替换为对应环境的实际地址，静态产物里会直接写入正确的API地址。

可选优化：用Vercel分支预览替代两个独立项目 #

如果不需要维护两个独立的Vercel项目，可以利用Vercel的分支预览功能：

• 只创建一个Vercel项目，关联代码仓库
• 在Vercel的环境变量设置中，给Production（对应main分支）和Preview（对应dev等其他分支）分别配置不同的VERCEL_API_TARGET或VITE_APP_API_URL
• 这样main分支部署生产环境，dev分支会自动生成预览环境，各自使用对应的API地址，无需手动维护两个项目

最佳实践总结 #

• 优先选方案一：前端代码无需关心环境，统一用/api前缀请求，Vercel负责转发，最简洁且无代码侵入
• 若需前端直接使用完整API地址，选方案二，确保Vercel环境变量配置正确，Vite会自动完成构建时替换

内容的提问来源于stack exchange，提问作者Paul F.