从真正的移动浏览器访问 flutter localhost

Question

我有 Flutter Web 应用程序，可以轻松部署到我 PC 上的 chrome 浏览器。部署成功后：

1. 安慰

2. 网络浏览器（Chrome）

我正在寻找从我的 iPhone 浏览器访问在 chrome 中运行的本地主机的方法。我的 iPhone 和 PC 都连接到同一网络。我获取了网络的 IP 地址并尝试从我的 iPhone Safari 浏览器访问，链接如下：

http://192.168.43.36:61867

但它不起作用，我收到“无法访问该站点”的消息。我是否可以执行任何额外的步骤来使我的移动浏览器可以访问 flutter localhost 或者使用 flutter 根本不可能？

Answer 1

如果你只想调试，你可以使用

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

然后访问 http://<your-ip>:8080

** 你还应该确保你的端口（8080）是开放的。

Answer 2

当您开发应用程序时，Flutter 并不真正输出 JS。该命令使用 Chrome 浏览器中的开发编译器flutter run启动应用程序，这意味着 Dart 代码直接在 Chrome 中运行。而且您无法真正从网络中的另一台计算机访问 Chrome，因为它不充当服务器。

您可能应该在 JS （又称为）中编译您的应用程序flutter build web以进行常规部署，以便从其他主机访问它。您可以使用 Python 的简单 HTTP 服务器来为应用程序提供服务。不需要安装任何框架、配置任何东西、编写Python代码。只需确保您已安装 Python 3 并python -m http.server 8000从应用程序构建输出运行即可。它将在端口 8000 上为应用程序提供服务。

Answer 3

The only way I managed to make it work on the Mac and test on the iPhone:

In your terminal, inside the project folder:

flutter build web

Building without sound null safety For more information see https://dart.dev/null-safety/unsound-null-safety

Compiling lib/main.dart for the Web... 34.5s

cd build/web
python3 -m http.server 8000

Serving HTTP on :: port 8000 (http://[::]:8000/) ... ::1 - - [28/Mar/2021 18:34:31] "GET / HTTP/1.1" 200 - ::1 - - [28/Mar/2021 18:34:31] "GET /main.dart.js HTTP/1.1" 200 - ::1 - - [28/Mar/2021 18:34:31] "GET /manifes....

Then in a new terminal tab:

~/ngrok http 8000

Forwarding https://xxxxxx.ngrok.io

or information on how to use ngrok: www.ngrok.com