Flutter Web项目构建后index.html页面空白问题求助

以下是几种可能导致页面空白的原因及对应的解决步骤：

• 直接通过file://协议打开index.html
  浏览器的同源策略会限制本地文件加载资源，Flutter Web必须通过HTTP服务器访问。
  解决：

  1. 执行flutter run web启动官方内置服务器，访问控制台输出的地址（通常是http://localhost:5000）
  2. 或者用其他HTTP服务器，比如在build/web目录下执行python -m http.server 8000（需安装Python），然后访问http://localhost:8000

• flutter.js路径配置错误
  你的index.html中<script src="/flutter.js" defer></script>使用了绝对根路径，如果服务器不是部署在根目录，会找不到该文件。
  解决：将路径改为相对路径，比如<script src="./flutter.js" defer></script>，确保和base href的配置匹配。

• 未正确构建Web产物
  仅执行flutter create web只是初始化Web支持，需要构建生成可运行的资源。
  解决：执行flutter build web，完成后进入build/web目录，再启动HTTP服务器访问该目录下的index.html。

• 浏览器缓存干扰
  旧的缓存资源可能导致加载异常。
  解决：

  1. 清除浏览器缓存（Ctrl+Shift+Delete）
  2. 用浏览器的隐私/无痕模式打开页面

• Dart代码编译失败
  虽然flutter doctor正常，但项目代码可能存在编译错误，导致main.dart.js未生成或损坏。
  解决：查看执行flutter build web或flutter run web时的终端输出，排查是否有代码报错，修复后重新构建。

• 服务Worker冲突
  本地测试时服务Worker可能引发资源加载问题。
  解决：修改index.html中的加载脚本，禁用服务Worker：

  _flutter.loader.loadEntrypoint({
    serviceWorker: null, // 禁用服务Worker
    onEntrypointLoaded: function(engineInitializer) {
      engineInitializer.initializeEngine().then(function(appRunner) {
        appRunner.runApp();
      });
    }
  });
  

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