Flutter Web部署Vercel遇文件缺失及404错误求助

1. Vercel托管Flutter Web是否需要特定配置？ #

需要。Vercel默认的静态文件服务规则和路由逻辑无法直接适配Flutter Web的单页应用结构，需通过vercel.json调整：

• 在部署的目标目录（即你上传的build/trenTech文件夹）下创建vercel.json文件，写入以下配置：

{
  "routes": [
    { "src": "/trenTech/(.*)", "dest": "/trenTech/$1" },
    { "src": "/trenTech/", "dest": "/trenTech/index.html" }
  ],
  "static": {
    "headers": {
      "/trenTech/**/*.js": {
        "Content-Type": "application/javascript"
      },
      "/trenTech/manifest.json": {
        "Content-Type": "application/json"
      }
    }
  }
}

• 若从GitHub仓库部署，需确保vercel.json被包含在仓库的build/trenTech路径下，或在Vercel部署设置中指定正确的输出目录为build/trenTech。

2. 如何确保所有必要文件被正确引用并提供服务？ #

• 确认--base-href参数有效性：你使用的flutter build web --output-dir=build/trenTech --base-href=/trenTech/ --release命令已正确设置基础路径，需检查本地build/trenTech/index.html中所有资源引用是否以/trenTech/开头。
• 验证Vercel部署文件完整性：在Vercel控制台的部署详情页，进入「Deployment Files」查看是否所有本地build/trenTech下的文件（包括flutter_bootstrap.js、manifest.json）都已成功上传。
• 修复manifest.json语法错误：检查本地manifest.json的JSON格式是否合法（无遗漏逗号、引号匹配），重新构建后再部署，避免文件损坏导致的解析错误。
• 设置正确的文件头：通过vercel.json中的static.headers配置，确保JS和JSON文件被浏览器以正确的MIME类型解析，避免因类型错误引发的加载失败。

3. 部署期间如何调试或验证文件路径？ #

• 查看部署日志：在Vercel控制台的「Deployment Logs」中，检查是否存在文件上传失败、路径映射错误的提示信息。
• 直接访问资源URL：部署完成后，在浏览器中直接访问资源的完整URL（如https://demo-services-iota.vercel.app/trenTech/flutter_bootstrap.js），确认文件是否能正常返回，若返回404则说明路径或文件存在问题。
• 利用浏览器开发者工具：打开浏览器的「Network」面板，对比本地部署和Vercel部署时的资源请求路径、返回状态码，定位路径不匹配的问题。
• 使用预览部署：每次修改配置或代码后，触发Vercel的预览部署，先在预览环境验证功能正常，再发布到生产环境。

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