堆棧內存溢出
  簡體   English   中英

在web服務器上發布Flutter web app顯示黑屏

[英]Publishing Flutter web app on web server shows blank screen

 原文  2023-02-01 14:49:10  4   2    flutter/ firebase

問題描述

我需要在 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 應用程序運行良好。

2 個解決方案

解決方案1
 0  2023-02-01 15:34:38

嘗試從 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>

解決方案2
 0  2023-02-01 17:44:23

我已經解決了更改 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: "...")
  );

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 發布 flutter web 應用后谷歌登錄不起作用 設置 App Check 時出現白屏 Flutter Web Flutter web 應用程序在部署到 firebase 主機后返回空白頁 在 firebase flutter web 項目上部署后顯示白色空白頁 Flutter web 應用程序丟失 firebase.json 並在部署到 firebase 托管時顯示“歡迎 Firebase 托管設置完成” 如何在 Flutter web 應用程序中使用雲 Firestore Flutter web App部署到雲端運行失敗 控制台程序發布 web 作業 Web App Azure Portal - Key Vault Reference 顯示未連接 Flutter Web：如何創建一個 flutter web 應用程序，它在掃描二維碼時打開
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM