Flutter Web（Hummingbird）部署Firebase Hosting后黑屏报错求助

问题根源分析 #

你遇到的SyntaxError: expected expression, got '<'是典型的请求JS文件却返回HTML内容的错误——这说明当浏览器尝试加载main.dart.js时，服务器返回的不是预期的JavaScript代码，而是一个HTML页面（大概率是404错误页或者错误重定向后的页面）。结合你的配置和操作来看，问题出在两个关键点：

• 错误的public目录指向
• 多余且错误的重定向规则

具体解决方案 #

1. 修正Firebase Hosting的public目录配置

Flutter Web项目构建完成后，所有可部署的静态文件默认都在build/web目录下，你的firebase.json里把public设为根目录下的public，完全偏离了正确的产物路径。

2. 移除错误的重定向，添加SPA适配的重写规则

Flutter Web是单页应用（SPA），需要把所有路由请求都指向index.html，避免刷新页面时出现404。同时你之前加的302重定向会打乱资源路径的解析逻辑，必须移除。

正确的firebase.json配置 #

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

完整部署步骤 #

1. 先重新构建Flutter Web项目，确保产物正确：

   flutter build web
   

   执行完后检查build/web目录，确认存在index.html、main.dart.js、assets等文件。

2. 重新部署到Firebase Hosting：

   firebase deploy --only hosting
   

为什么之前的配置会出错？ #

你手动删除了根目录public下自动生成的index.html，又添加了重定向到/web/index.html，但实际上Flutter的构建产物并不在这个路径下。当浏览器请求main.dart.js时，服务器会在你指定的public目录（根目录下的public）里查找web/main.dart.js，找不到就返回HTML格式的错误页面，自然会导致JS解析失败，页面黑屏。

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