我目前正在尝试为一个现有的Flutter项目（使用Firebase）添加web应用支持。我已经按照说明设置了Firebase for Web和Flutter。但是当我试图在Chrome中运行该项目时，我得到了一个空白屏幕和以下错误日志：第一次
我已经测试过在Chrome上运行“Flutter Demo”，它是有效的。而且，我只在最新的开发频道上运行“Flutter Demo”，所以这就是我现在正在使用的。Beta频道没有工作。
这是我的酒吧说明书
下面是我的index.html：
<!DOCTYPE html>
<html>
<head>
<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="astoria">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>astoria</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-functions.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-storage.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "...",
measurementId: "..."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>请让我知道是否有其他信息可以帮助。非常感谢您提前！：）
4条答案
按热度按时间izkcnapc1#
请参阅此链接GitHub-thread-for-whiteScreenIssue-in-Flutter
我也遇到过这个问题，我只是按照线程中告诉的步骤
67up9zun2#
我感觉你正在使用过时的flutter_web项目。你看到的错误在某种程度上是这个repo的一部分。
所以我想说，正如github repo中建议的那样，使用page中的标准flutter指令。正如另一个答案中建议的那样，你可以在
dev通道中，也正如文档中建议的那样，在日常开发中留在beta通道中，如果你需要更多最新版本，直接使用master通道。由于你在
pubspec.yaml中使用了很多软件包，你必须确保flutter web支持每一个软件包。例如，flutter web并不支持所有的firebase软件包。这需要时间来检查，但这是前进的必要步骤。yhuiod9q3#
1.在发布模式下使用命令-
Flutter生成网页--释放
1.现在转到您的项目根文件夹-〉转到build，现在您将找到名为web的文件夹。现在这是将部署用于托管的文件夹。
1.现在你必须打开你的命令提示符到你的项目根文件夹，你也可以在build文件夹中打开你的cmd，但是我建议你在根文件夹中打开，这样你就不必一次又一次地初始化firebase的不同功能。
1.现在使用命令-初始化firebase
火线初始化
1.现在选择firebase托管选项-〉选择您的项目
1.注意这是主要步骤--询问“您希望使用什么作为公共目录？”
您要将什么用作公用目录？（公用）
只需按退格键并删除（public），然后写入build/web
你想用什么作为你的公用目录？build/web
然后按回车键
1.现在，在两个命令之后，它将要求覆盖您的index.html****另一个主要步骤。
文件web/index.html已存在。是否覆盖？y/n
只需按n选择否。我们不想覆盖该文件
1.现在，在您的firebase初始化成功完成后，写入-
火力基地部署
而且您的项目/Web应用程序将在没有白色的情况下运行：）
x9ybnkn64#
我已经面临过这个问题，我已经尝试了答案，但没有任何工作对我来说。然后我已经运行我的flutter网站在微软边缘，然后它是工作良好。
如果您的chrome浏览器显示黑屏请尝试以下步骤
这对我很有效：）