Flutter Web应用发布后显示空白屏问题求助

根据你提供的控制台日志，核心问题集中在三个方面，逐个解决即可恢复Web应用正常运行：

一、修复Stripe插件引发的Platform API不兼容错误 #

这是导致空白屏的首要原因——Web环境不支持Platform._operatingSystem调用，而Stripe初始化时依赖了Platform.isIOS判断。

• 替换移动端专属的Platform判断，改用Web兼容方式：

  import 'dart:html' as html;
  
  // 自定义Web兼容的iOS判断
  bool get isIOS => html.window.navigator.userAgent.contains('iPhone') || html.window.navigator.userAgent.contains('iPad');
  

  或使用Flutter官方的跨平台判断工具：

  import 'package:flutter/foundation.dart';
  
  if (defaultTargetPlatform == TargetPlatform.iOS) {
    // 保留原有逻辑，Web环境会自动适配
  }
  

• 确认Stripe依赖支持Web：检查pubspec.yaml中的Stripe包版本，使用支持Web的分支（如stripe_flutter 4.0.0+版本），或改用Web专用的Stripe初始化流程。

二、解决Firebase Messaging Service Worker 404错误 #

• 若需要Web端消息推送：在项目web目录下创建firebase-messaging-sw.js文件，填入适配的Firebase配置：

  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js');
  importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js');
  
  firebase.initializeApp({
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的MESSAGING_SENDER_ID",
    appId: "你的APP_ID"
  });
  
  const messaging = firebase.messaging();
  

• 若不需要Web端推送：在main函数中对Web环境禁用Firebase Messaging初始化：

  import 'package:flutter/foundation.dart';
  
  void main() {
    if (!kIsWeb) {
      // 仅移动端初始化Firebase Messaging
    }
    runApp(MyApp());
  }
  

三、处理removeChild空指针错误 #

该错误多由前两个问题导致页面渲染中断引发，解决前两个问题后通常会自动消失。若仍存在：

• 检查web/index.html中是否存在Flutter挂载的DOM元素（默认是<div id="app"></div>）；
• 确保main函数中没有在runApp之前直接操作DOM的代码。

部署额外注意事项 #

线上部署地址为https://appcapenergy.com/web，构建时需指定base-href：

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

部署时确保所有构建产物（包括firebase-messaging-sw.js）都上传至服务器的/web目录下。

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