为啥我在构建 Flutter Web 时会出现白屏

Posted 2023-02-23

【中文标题】为啥我在构建 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.

【参考方案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 步移回这些文件。