Skip to content

fix(frontend): Vercel 预览把 index.ts 当视频下载,无法打开网页 #251

Description

@gac0812

背景

仓库已接入 Vercel Git 集成,PR 评论里会给出 Preview 链接。Vercel 项目根目录是 frontendfrontend 是 Expo / React Native 客户端,入口为 index.ts,当前没有 Web 静态导出配置,也没有 vercel.json

现象

打开任意 PR 的 Vercel Preview(例如 *.vercel.app)不会进入 TimeFlow 页面,浏览器会下载一个文件。

实测当前 docs/readme-product-intro 预览:

  • 根路径 / 返回 200
  • content-type: video/mp2t
  • 响应正文是 frontend/index.ts 源码
  • /index.html 返回 404

.ts 在 IANA / 浏览器里对应 MPEG-2 传输流,不是 TypeScript。浏览器按视频类型处理该响应,因此表现为下载文件。

原因

Vercel 把 frontend 源码当成静态站点发布,没有先执行 expo export --platform web。产物里没有 index.html 时,会把 index.ts 当作目录入口发出去,并带上 video/mp2t

CI 目前只做 expo export --platform android,无法拦住这个问题。

建议方案

  1. frontend/app.json 声明 Web 为 Metro SPA(web.output: "single")。
  2. 增加 frontend/vercel.json:构建命令 expo export -p web,输出目录 dist,避免继续发布源码。
  3. CI 增加 Web 导出,并断言生成了 dist-web/index.html

验收标准

  • 打开 Vercel Preview 根路径时,响应为 text/htmlindex.html,浏览器不再下载 index.ts
  • npx expo export --platform web 能在 dist / dist-web 中生成 index.html
  • CI Frontend job 包含 Web 导出,并检查 index.html 存在

不做

  • 不把 Vercel 预览变成完整可用的线上环境(不配置生产 API / WebSocket,不保证语音、定位、闹钟等原生能力在浏览器里可用)
  • 不改 Android / iOS 原生构建流程
  • 不引入 Expo Router 或 EAS Hosting

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions