Expo React Native Web应用部署Vercel/Firebase时空白页求助

排查步骤与解决方案 #

1. 验证导出文件结构 #

确认dist目录下包含index.html以及static文件夹（内含js、css、静态资源）。如果结构缺失或异常，重新执行导出命令并留意终端输出的隐藏报错：

npx expo export --platform web

2. 浏览器开发者工具定位问题 #

打开浏览器F12开发者工具，重点查看两个标签：

• Console：检查是否有JS语法错误、资源加载失败等报错信息；
• Network：确认index.html及static下的所有资源返回状态码为200，无404情况。

3. 修正Vercel配置文件 #

调整vercel.json，适配SPA静态部署规则，移除可能冲突的配置：

{
  "buildCommand": "expo export -p web",
  "outputDirectory": "dist",
  "framework": null,
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

移除cleanUrls: true，静态导出的SPA依赖index.html作为统一入口，该配置会导致路径解析异常。

4. 调整Expo Web配置 #

• 确认app.json中favicon路径正确，对应文件确实存在；
• 若使用Metro打包器存在兼容问题，切换为Webpack尝试：

"web": {
  "bundler": "webpack",
  "output": "static",
  "favicon": "./assets/images/favicon.png"
}

5. 本地测试优化 #

避免缓存干扰，使用带禁用缓存参数的本地服务器测试：

npx http-server dist -c-1

6. Firebase部署配置 #

若部署到Firebase，在firebase.json中添加SPA路由规则：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

执行部署命令：

firebase deploy --only hosting

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