Flutter Web部署报错：ReferenceError: Can't find variable: _flutter 求助

访问自己部署的Flutter Web应用（example.com）时遇到报错：ReferenceError: Can't find variable: _flutter，最近刚给网站配置了HTTPS，怀疑是这个操作导致的问题。试过下面这些方法都没解决：

• 执行flutter clean后重新构建应用
• 把base href改成./而不是/
• 尝试在index.html里手动加main.dart.js脚本
• 在手机和电脑上都试过访问
• 用HTTP、HTTPS带WWW前缀的地址都试过访问
• 换了新设备访问，排除缓存问题

把应用部署到Firebase上就能正常运行，更确定是HTTPS配置相关的问题。

相关代码与环境 #

index.html核心代码 #

<script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });
</script>
</body>

flutter doctor检测结果 #

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.7.1, on macOS 13.1 22C65 darwin-arm64, locale
    en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] Connected device (5 available)
[✓] HTTP Host Availability

解决方法 #

1. 检查HTTPS下静态资源的路径和访问权限 #

Firebase会自动处理静态资源的HTTPS适配，但自建服务器容易出问题：

• 检查下服务器上flutter.js、main.dart.js这些静态文件的存放路径，和index.html里引用的路径是不是一致。HTTPS环境下别用容易解析出错的相对路径，试试换成绝对路径（比如/flutter.js）测试。
• 确认服务器允许HTTPS请求访问这些静态资源，有些服务器会限制HTTPS下的静态文件权限，还要确保配置了正确的MIME类型（JS文件对应application/javascript）。

2. 排查混合内容拦截问题 #

从HTTP切到HTTPS后，浏览器会拦截页面里的HTTP资源：

• 检查index.html里所有资源引用，别用http://开头的链接，要么用HTTPS要么用相对路径。
• 打开浏览器控制台看网络请求，确认flutter.js是不是成功加载了（状态码200），如果加载失败，根据错误提示调整服务器配置。

3. 暂时关掉Service Worker测试 #

HTTPS对Service Worker的运行要求很严格，可能是这部分出问题：

• 修改index.html里的加载代码，把serviceWorker的配置注释掉，看看能不能正常初始化：

_flutter.loader.loadEntrypoint({
  // 注释掉这段Service Worker配置
  // serviceWorker: {
  //   serviceWorkerVersion: serviceWorkerVersion,
  // }
}).then(function(engineInitializer) {
  return engineInitializer.initializeEngine();
}).then(function(appRunner) {
  return appRunner.runApp();
});

如果这样能正常运行，再去排查Service Worker的部署和配置问题，比如确认service-worker.js和flutter_service_worker.js有没有放到服务器根目录，服务器有没有允许访问这些脚本。

4. 检查服务器的缓存和压缩配置 #

有些服务器在HTTPS下的缓存策略会搞砸资源加载：

• 确保服务器没缓存旧的index.html或者静态资源，可在服务器配置里加缓存控制头，禁止对flutter.js、main.dart.js这些核心文件长期缓存。
• 检查是不是开了GZIP或Brotli压缩，要是压缩配置错了，会导致JS文件解析失败，自然初始化不了_flutter对象。

5. 重新构建并完整部署 #

再走一遍构建流程，确保部署包没问题：

• 先执行flutter clean，再运行flutter build web --release，确认build/web目录下所有必要文件都在（flutter.js、main.dart.js、service-worker.js等）。
• 把整个build/web目录完整上传到服务器，别漏文件或者上传过程中损坏了。

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