在web服务器上发布Flutter web app显示黑屏

Question

我需要在 web 服务器文件夹上发布我的 Flutter web 应用程序。

这里有 index.html 文件：

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="/freelife/">
  <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="capenergy_ns">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

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

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

  <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>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script>

  const firebaseConfig = {
apiKey: "AIz...",
        authDomain: "fre...",
        projectId: "fre...",
        storageBucket: "free...",
        messagingSenderId: "53...",
        appId: "1:538....",
        measurementId: "G-X..."
};
  firebase.initializeApp(firebaseConfig);
  </script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
  if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        navigator.serviceWorker.register("firebase-messaging-sw.js");
      });
    }
    </script>

</body>
</html>

这里有 firebase-messaging-sw.js：

importScripts("https://www.gstatic.com/firebasejs/9.12.1/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/9.12.1/firebase-messaging.js");
firebase.initializeApp({
       apiKey: "AIz...",
        authDomain: "free...",
        projectId: "free...",
        storageBucket: "free...",
        messagingSenderId: "53...",
        appId: "1:53...",
        measurementId: "G-X..."
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    const promiseChain = clients
        .matchAll({
            type: "window",
            includeUncontrolled: true
        })
        .then(windowClients => {
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                windowClient.postMessage(payload);
            }
        })
        .then(() => {
            return registration.showNotification("New Message");
        });
    return promiseChain;
});
self.addEventListener('notificationclick', function (event) {
    console.log('notification received: ', event)
});

问题是在应用程序的构建文件夹中发布创建的 web 文件夹，在浏览器中启动 web 显示空白页面。

查看 web 控制台调试器的 output，它抛出很多错误：

在我插入所有 Firebase 依赖项之前，web 应用程序运行良好。

Answer 1

尝试从 index.html 文件中删除 [base href="/freelife/"] 它应该保持这样。

 <,DOCTYPE html> <html> <head> <.-- If you are serving your web app in a path other than the root. change the href value below to reflect the base path you are serving from: The path provided below has to start and end with a slash "/" in order for it to work correctly: For more details. * https.//developer.mozilla.org/en-US/docs/Web/HTML/Element/base This is a placeholder for base href that will be replaced by the value of the `--base-href` argument provided to `flutter build`. --> <.--<base href="/freelife/"> --> <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="capenergy_ns"> <link rel="apple-touch-icon" href="icons/Icon-192.png"> <;-- Favicon --> <link rel="icon" type="image/png" href="favicon.png"/> <title>Freelife</title> <link rel="manifest" href="manifest.json"> <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> <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.4,1/firebase-messaging:js"></script> <script> const firebaseConfig = { apiKey. "AIz..,": authDomain. "fre..,": projectId. "fre..,": storageBucket. "free..,": messagingSenderId: "53...". appId, "1:538...;". measurementId; "GX..." }, firebase.initializeApp(firebaseConfig). </script> <script src="main.dart;js" type="application/javascript"></script> <script> if ("serviceWorker" in navigator) { window;addEventListener("load", function () { navigator.serviceWorker.register("firebase-messaging-sw.js"); }); } </script> </body> </html>

Answer 2

我已经解决了更改 index.html 的问题，如下所示：

<!DOCTYPE html>
<html>
<head>
    <!--
      If you are serving your web app in a path other than the root, change the
      href value below to reflect the base path you are serving from.

      The path provided below has to start and end with a slash "/" in order for
      it to work correctly.

      For more details:
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

      This is a placeholder for base href that will be replaced by the value of
      the `--base-href` argument provided to `flutter build`.
    -->
    <base href="/webapp/">

    <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="freelife">
    <link rel="apple-touch-icon" href="icons/Icon-192.png">

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

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

    <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>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>

<script type="module">


  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIza...",
    authDomain: "fre...",
    projectId: "fre...",
    storageBucket: "free...",
    messagingSenderId: "538...",
    appId: "1:...",
    measurementId: "G-..."
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
</script>
<script src="main.dart.js" type="application/javascript"></script>
<script>
  if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        navigator.serviceWorker.register("/firebase-messaging-sw.js");
      });
    }
    </script>

</body>
</html>

然后在 main.dart 上，我更新了这段代码：

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  await Firebase.initializeApp(

      options: const FirebaseOptions(
          apiKey: "AIza....",
          appId: "1:5389...",
          messagingSenderId: "...",
          projectId: "...")
  );