Flutter Web页面空白，控制台提示FlutterLoader is not defined问题求助

我的Flutter Web应用构建正常，但在Chrome浏览器中打开时显示空白页面，控制台报错FlutterLoader is not defined。

我的index.html代码如下：

<!DOCTYPE html>
<html>
<head>
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="architect_schwarz_admin">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>web admin</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    const serviceWorkerVersion = '{{flutter_service_worker_version}}';
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      if (typeof FlutterLoader !== 'undefined') {
        // Download main.dart.js
        FlutterLoader.load({
          serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
          },
          onEntrypointLoaded: function(engineInitializer) {
            engineInitializer.initializeEngine().then(function(appRunner) {
              appRunner.runApp();
            });
          }
        });
      } else {
        console.error('FlutterLoader is not defined.');
      }
    });
  </script>
</body>
</html>

控制台报错截图：

解决方法 #

• 移除flutter.js的defer属性
  defer会延迟脚本加载，可能导致window.load事件触发时FlutterLoader还未定义。修改脚本标签：

  <script src="flutter.js"></script>
  

• 检查flutter.js是否存在
  确认构建后的web目录下有flutter.js文件，若缺失，重新执行构建命令：

  flutter build web
  

• 适配新版本Flutter的初始化逻辑
  部分新版本Flutter已将初始化命名空间改为_flutter.loader，替换body内的脚本：

  <script>
    window.addEventListener('load', function(ev) {
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            appRunner.runApp();
          });
        }
      });
    });
  </script>
  

• 强制清除浏览器缓存
  按Ctrl+Shift+R强制刷新页面，避免缓存的旧脚本干扰。

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