如何用Firebase托管Flutter Web？已按步骤操作仍部署失败

Flutter Web项目不能直接套用普通Web项目的Firebase部署流程，必须先构建Web产物，再配置Firebase指向正确的目录，以下是完整的正确操作步骤和问题排查方案：

正确部署流程 #

• 1. 先构建Flutter Web静态产物
     在Flutter项目根目录执行命令，生成可部署的Web文件：
     flutter build web
     执行完成后，项目根目录会出现build/web文件夹，里面包含index.html、main.dart.js等Flutter Web运行必需的文件。
• 2. 初始化Firebase Hosting
     执行firebase init hosting，注意以下关键配置项：
  • 选择已有的Firebase项目或创建新项目
  • 当询问**What do you want to use as your public directory?**时，输入build/web（这是Flutter构建后的静态文件目录，必须替换Firebase默认的public选项）
  • 询问**Configure as a single-page app (rewrite all urls to /index.html)?**时，选Yes（Flutter Web是单页应用，这个配置能避免路由跳转报错）
  • 询问**File build/web/index.html already exists. Overwrite?**时，选No（不要覆盖Flutter生成的index.html）
  • 其余选项可根据自身需求选择，测试阶段建议选No跳过GitHub自动部署配置
• 3. 部署到Firebase
     执行部署命令：
     firebase deploy --only hosting

问题排查（针对你之前的失败操作） #

你之前部署失败的核心原因大概率是初始化Firebase时，没有将public目录设置为build/web。Firebase默认会指向public目录，但你的Flutter项目没有这个目录，或者目录内没有正确的Web产物，导致部署后无法加载main.dart对应的内容。

如果已经完成过Firebase初始化，无需重新执行firebase init，直接修改项目根目录的firebase.json文件即可，确保hosting部分配置如下：

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

修改保存后，重新执行firebase deploy --only hosting即可完成部署。

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