Flutter Web部署至Firebase Hosting后出现异常求助

问题根源 #

出现意外字符'<'是因为请求图标或manifest文件时，Firebase Hosting返回的是index.html内容（HTML以<开头），而非预期的资源文件。这基本是路由配置没处理好静态资源请求导致的。

解决方案步骤 #

1. 调整firebase.json的重写规则 #

得让Firebase优先返回静态资源，别把这些请求都转到index.html。修改firebase.json里的hosting.rewrites规则：

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

说白了就是加!排除这些静态资源路径，先让Firebase直接返回这些文件，剩下的路由再交给Flutter处理。

2. 检查index.html里的资源路径 #

别用硬编码的绝对URL，换成相对路径更靠谱，避免部署后域名变化导致路径错误：

<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="icons/Icon-192.png">

3. 重新构建部署 #

先重新生成release构建产物，再部署：

flutter build web --release
firebase deploy --only hosting

4. 清缓存试试 #

要是改完还是不行，大概率是缓存搞的鬼：

• 去Firebase控制台的Hosting页面，点击“清除缓存”按钮
• 浏览器按Ctrl+Shift+R强制刷新

额外排查点 #

• 确认build/web/icons目录下确实存在Icon-192.png文件，别构建时遗漏了
• 检查manifest.json格式是否正确，有没有语法错误（比如少逗号、引号不配对）

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