为什么我在构建 Flutter Web 时会出现白屏答案

【问题标题】：Why do I get white screen when building flutter web为什么我在构建 Flutter Web 时会出现白屏
【发布时间】：2019-10-29 23:26:35
【问题描述】：

我想构建一个flutter web应用程序，所以我输入'webdev build'命令，操作完成后，我打开位于构建目录的'index.html'文件，它只是一个白屏。我在一个新项目上尝试过，问题仍然存在。开发过程中没有问题。

这是我的颤振医生输出：

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17134.766], locale en-US)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.3)
[√] VS Code (version 1.35.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

【问题讨论】：

标签： flutter dart flutter-web

【解决方案1】：

您需要运行webdev serve 命令，它会提供类似localhost:8080 或127.0.0.1:8080 的地址。在为我的一个 Flutter Web 项目运行 webdev serve 后，我附上了一张截图。它说 Serving web on http://127.0.0.1:8080 所以你需要在浏览器中打开那个 URL。

这个答案是在 flutter-web 是一个单独的项目并且 webdev 是运行您的应用程序的方式时编写的。

现在您可以使用 flutter run -d chrome 为 Web 运行它。

【讨论】：

是的，但它只是提供了一个服务器来进行开发。我需要输出文件。
输出文件是什么意思？请详细说明
哦，我的错，我没有注意文档中的这一部分，“使用静态 HTTP 服务器运行应用程序。”。我只是打开 index.html 没有使用它是服务器。谢谢兄弟！
我去试试谢谢
我正在运行 webdev serve 命令，但 url 仍然是空白屏幕。你能帮忙吗

【解决方案2】：

我没有注意文档中的这一部分，“使用静态 HTTP 服务器运行应用程序。”。我只是打开 index.html 而不使用它是服务器。

【讨论】：

【解决方案3】：

对我来说似乎是防病毒软件的问题，运行 flutter run -d chrome --release 解决了我的问题。

【讨论】：

【解决方案4】：

我遇到了同样的问题。我在 chrome 上使用了检查代码并检查了 console 部分。所以出现了错误not allowed to load local resource 并且某个文件的路径是这样的：

import 'file:///C:/Users/../someFile.dart';

并通过更改路径

import 'package:.../someFile.dart'

白屏消失了，问题解决了。

【讨论】：

【解决方案5】：

对我来说，我在 master 频道中，并在下面解决问题：

flutter channel dev
flutter upgrade
flutter run -d chrome

【讨论】：

【解决方案6】：

只需在命令行中运行 flutter config --enable-web 并关闭编辑器，然后再次运行应用程序

【讨论】：

【解决方案7】：

我遇到了同样的问题。我处于稳定频道，并在下面解决问题：

flutter clean 

flutter pub get 

flutter pub cache repair

希望能解决你的问题。

【讨论】：

【解决方案8】：

我有同样的问题。我在主频道并在下面解决问题：

flutter clean 

flutter pub get 

flutter pub cache repair

【讨论】：

【解决方案9】：

您必须将文件上传到服务器并将它们放在根文件夹中。

如果要将它们放在其他文件夹中，则必须编辑“index.html”文件以告知文件夹。

例如：如果您将文件上传到“test”文件夹，则必须编辑“index.html”这一行：

<base href="/">

到

<base href="/test/">

【讨论】：

【解决方案10】：

我的应用在 Chrome 中作为空白页运行时遇到了同样的问题。我已经通过使用flutter create . 重新创建一个项目来修复它：

将您的lib 目录和pubspec.yml 文件移动到安全的地方。
然后，删除项目目录中的其余文件和目录。
运行flutter create .。
从第 1 步移回这些文件。

【讨论】：