如何在手机浏览器中运行Flutter项目？

首先确认你的项目已开启Web支持，未开启的话先在项目根目录执行flutter config --enable-web，之后运行flutter create .补全Web相关配置文件即可。

方法1：局域网实时调试（支持热重载） #

• 确保测试用的手机和开发电脑连接同一个无网络隔离的WiFi/局域网
• 在开发终端执行运行命令：flutter run -d chrome --web-port 8080，端口可自行修改为未被占用的其他端口
• 查看开发电脑的局域网IP：Windows系统执行ipconfig查询IPv4地址，macOS/Linux系统执行ifconfig或ip addr查询，示例IP为192.168.3.45
• 直接打开手机浏览器，输入地址http://192.168.3.45:8080即可访问项目，代码修改后触发的热重载也会同步到手机端

方法2：生产环境构建测试 #

• 先执行构建命令生成生产环境静态文件：flutter build web --release
• 用任意静态文件服务工具挂载构建生成的build/web目录，例如使用Python可直接在该目录下执行python -m http.server 8080
• 和上述步骤一致，手机浏览器输入开发电脑局域网IP+端口即可访问生产效果

常见问题排查 #

• 若访问失败，先检查开发电脑的防火墙是否拦截了对应端口的入站请求，可临时关闭防火墙或给端口添加白名单
• 若项目用到相机、定位等敏感权限，部分浏览器会限制非HTTPS域名的权限调用，可临时给对应地址开启权限，或本地配置自签名证书解决

内容的提问来源于stack exchange，提问作者samit