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

Question

我有 flutter web 应用程序，可以轻松部署到我电脑上的 chrome 浏览器。部署成功后：

控制台

Web 浏览器(Chrome)

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

http://192.168.43.36:61867

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

Answer 1

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

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

Answer 2

使用这项免费服务 ngrok.com 可以让您公开您的本地主机。因此，您不仅可以在从同一网络开发时访问您的应用程序，还可以通过互联网与其他人共享它，在您的情况下是您的手机。

Answer 3

备选

构建应用程序：flutter build web
更改目录：cd <pathProject>/web/build
任何服务器：python -m http.server 5000
up ngrok : ngrok http.server 5000
在移动浏览器中：“https://a824ccb9d545.ngrok.io”（示例）

Answer 4

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

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

然后访问http://:8080

** 您还应该确保您的端口 (8080) 已打开。

Answer 5

我设法让它在 Mac 上运行并在 iPhone 上测试的唯一方法：

在您的终端中，在项目文件夹内：

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....

然后在新的终端选项卡中：

~/ngrok http 8000

Forwarding https://xxxxxx.ngrok.io

或有关如何使用 ngrok 的信息：www.ngrok.com

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

Access flutter localhost from real mobile browser

localhost

ip-address

mobile-safari

dart

flutter