Flutter Web部署GitHub Pages空白页及Permissions-Policy报错求助

云原生阿岚

2026-6-26

解决Flutter Web部署GitHub Pages后空白页问题

首先明确：你看到的Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'是GitHub Pages默认配置导致的警告，和页面空白无关，无需处理。以下是针对空白页的排查修复方案：

1. 用正确构建命令注入base href

不要手动修改index.html里的<base href>，通过构建命令自动注入，避免service worker版本等变量未被正确替换：

flutter build web --base-href "/pozxy/"

构建完成后，将build/web目录下的所有文件推送到GitHub的gh-pages分支。

2. 临时禁用Service Worker验证问题

GitHub Pages在子路径部署时，Service Worker可能存在路径兼容问题，先禁用测试：
修改index.html中的加载脚本，将serviceWorker配置改为null：

_flutter.loader.loadEntrypoint({
  serviceWorker: null, // 替换原serviceWorkerVersion配置
  onEntrypointLoaded: function(engineInitializer) {
    engineInitializer.initializeEngine().then(function(appRunner) {
      appRunner.runApp();
    });
  }
});

重新构建部署后，用无痕模式打开页面测试。如果正常显示，说明是Service Worker导致的问题，后续可以用flutter build web --no-service-worker命令构建，跳过Service Worker生成。

3. 检查资源文件路径

登录GitHub查看gh-pages分支的文件结构，确保main.dart.js、flutter.js、manifest.json等文件都在分支根目录下（对应页面路径/pozxy/），没有嵌套在额外文件夹中。如果构建文件被放入子文件夹，需调整部署步骤，直接推送build/web的内容到gh-pages根目录。