Flutter Web应用运行后暂停显示web_entrypoint.dart无报错Chrome页面空白

第一步：检查web/index.html的Firebase配置 #

该类无报错启动空白问题90%以上是Firebase Web初始化配置缺失或顺序错误导致，需确认你已经在web/index.html的<body>标签内、Flutter默认加载脚本之前，正确添加Firebase初始化代码：

• 先引入Firebase核心及所需服务（登录功能需额外引入auth）的SDK
• 填入Firebase控制台生成的对应Web应用配置参数
• 显式调用初始化方法完成Firebase初始化
  参考配置结构如下：

<body>
  <!-- 引入Firebase SDK，版本可根据需求调整 -->
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js"></script>
  <!-- 其他用到的Firebase服务SDK按需添加 -->
  
  <script>
    // 替换为你自己项目的Firebase配置参数
    const firebaseConfig = {
      apiKey: "你的apiKey",
      authDomain: "你的authDomain",
      projectId: "你的projectId",
      storageBucket: "你的storageBucket",
      messagingSenderId: "你的messagingSenderId",
      appId: "你的appId"
    };
    // 执行初始化
    firebase.initializeApp(firebaseConfig);
  </script>

  <!-- 下方是Flutter默认的加载脚本，不要调整顺序 -->
  <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    function loadMainDartJs() {
      if (scriptLoaded) {
        return;
      }
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.append(scriptTag);
    }

    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
        navigator.serviceWorker.register(serviceWorkerUrl);
      });
    }
    loadMainDartJs();
  </script>
</body>

第二步：确认依赖与环境配置正确 #

• 检查pubspec.yaml已添加firebase_core、firebase_auth等依赖，且版本兼容适配当前Flutter版本
• 执行flutter clean清理编译缓存，再执行flutter pub get重新拉取依赖
• Flutter 3.0+版本需确保所有Firebase相关依赖均支持空安全与Web平台

第三步：排查JS层面报错 #

调试时停在web_entrypoint.dart属于正常的初始断点，点击继续后仍空白可打开Chrome开发者工具（F12），切换到控制台标签刷新页面，查看是否有未捕获的JS错误，绝大多数情况为Firebase初始化失败导致Flutter启动阻塞。

第四步：可选Flutter端显式初始化方案 #

也可在main.dart中直接完成Firebase初始化，规避index.html的加载顺序问题：

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 显式初始化Firebase
  await Firebase.initializeApp(
    options: const FirebaseOptions(
      apiKey: "你的apiKey",
      authDomain: "你的authDomain",
      projectId: "你的projectId",
      storageBucket: "你的storageBucket",
      messagingSenderId: "你的messagingSenderId",
      appId: "你的appId",
    ),
  );
  runApp(const MyApp());
}

使用该方案需保证firebase_core版本在0.5.0以上，无需再在index.html中写初始化代码，仅引入对应Firebase SDK即可。

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