Flutter应用部署Firebase后Chrome报crbug/1173575非JS模块废弃错误

解决方案 #

1. 修复base href配置 #

你当前index.html中<base href="/">处于注释状态，Flutter Web依赖该标签确认资源加载的根路径，取消注释即可：

<base href="/">

如果后续部署到非根路径的站点，将href值改为对应的子路径即可。

2. 修复Service Worker版本配置 #

你当前代码中var serviceWorkerVersion = null;会导致Service Worker的缓存校验逻辑失效，旧缓存无法被新版本覆盖，这就是隐身模式首次可访问、后续访问报错的核心原因。将变量修改为Flutter构建自动注入的版本占位符：

var serviceWorkerVersion = "{{flutter_service_worker_version}}";

Flutter执行flutter build web时会自动将该占位符替换为本次构建的唯一哈希值，每次发布都会触发Service Worker更新。

3. 配置Firebase Hosting缓存规则 #

在项目根目录的firebase.json中添加核心资源的无缓存配置，避免浏览器长期缓存过期的业务代码：

{
  "hosting": {
    "public": "build/web",
    "headers": [
      {
        "source": "flutter_service_worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source": "main.dart.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      }
    ]
  }
}

4. 重新构建部署并清除本地缓存 #

• 执行flutter build web --release重新构建生产版本
• 执行firebase deploy --only hosting部署到Firebase
• 本地Chrome访问chrome://serviceworker-internals/，找到你的站点对应的Service Worker，点击Unregister注销旧服务，之后按Ctrl+Shift+R强制刷新页面即可正常访问。

兼容IOS 12.5.4的补充配置 #

如果需要支持该版本IOS，构建时添加参数指定兼容性更好的渲染器：

flutter build web --release --web-renderer html

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