React应用在Vercel部署异常：购物车故障及初始商品异常问题

1. 检查购物车状态初始化逻辑 #

• 本地与生产环境的初始状态可能存在差异。如果购物车状态依赖localStorage读取，部署后首次加载时localStorage为空，但代码若硬编码了初始商品，就会出现启动自带2个商品的情况。检查状态管理文件（比如cartSlice.js）的初始state定义：

  // 错误示例：硬编码初始商品
  const initialState = {
    items: [
      { id: 1, name: '示例商品1' },
      { id: 2, name: '示例商品2' }
    ]
  }
  

  改为从localStorage读取，无数据则设为空数组：

  const initialState = {
    items: JSON.parse(localStorage.getItem('cart')) || []
  }
  

2. 验证环境变量与API请求 #

• 如果添加商品依赖后端API，确认Vercel项目的环境变量配置是否与本地.env一致。若环境变量未同步，会导致API请求失败，无法添加商品。
• 打开浏览器控制台（F12），查看Network标签下的API请求状态，排查是否存在404/500错误，或请求地址是否适配生产环境（比如本地用localhost:3000/api，生产需替换为Vercel域名）。

3. 修复路由访问问题 #

• 购物车无法访问大概率是React Router的SPA路由配置问题。使用BrowserRouter时，Vercel需要配置vercel.json支持路由重写，否则直接访问购物车路径会返回404。在项目根目录创建vercel.json：

  {
    "rewrites": [
      { "source": "/(.*)", "destination": "/" }
    ]
  }
  

  提交后重新部署。

4. 清理Vercel构建缓存 #

• Vercel的旧构建缓存可能导致代码更新不生效。进入项目Deployments页面，找到最新部署记录，点击Redeploy并勾选Clear build cache选项，重新构建部署。

5. 排查本地存储异常 #

• 在浏览器控制台执行localStorage.getItem('cart')，检查是否存在异常值。若有异常，手动清除localStorage后刷新页面，观察初始商品是否消失。

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