Flutter项目运行在浏览器无法访问

项目运行在浏览器显示

检查Flutter是否启用Web支持 执行命令

flutter devices

出现下图说明配置正常

二、

先清理项目缓存(避免编译缓存导致的问题)

flutter clean

获取依赖

flutter pub get

运行Chrome,指定端口8888

flutter run -d chrome --web-port 8888

如果出现下面的情况说明web sdk下载被墙了

三、修改镜像地址

~永久修改

  • 按下 Win + R,输入 sysdm.cpl 回车,打开「系统属性」→「高级」→「环境变量」
  • 在「用户变量」中点击「新建」,添加两个变量:
    • 变量名:PUB_HOSTED_URL,变量值:https://pub.flutter-io.cn
    • 变量名:FLUTTER_STORAGE_BASE_URL,变量值:https://storage.flutter-io.cn
  • 保存后关闭所有终端 / VSCode,重新打开终端执行 flutter run -d chrome --web-port 8888

~临时修改

配置Flutter国内镜像(清华源) env:PUB_HOSTED_URL="https://pub.flutter-io.cn" env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn" # 重新执行运行命令(此时会从国内镜像下载Web SDK) flutter run -d chrome --web-port 8888

但是这样会导致只有终端执行flutter run -d chrome --web-port 8888命令才会可以运行,如果直接点Run依然有问题

所以需要修改 .vscode下launch.json,修改如下,这样就可以直接Run运行了

相关推荐
码客前端1 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛2 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程14 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保15 分钟前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫16 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
kirk_wang21 分钟前
Flutter艺术探索-Flutter路由导航基础:Navigator使用详解
flutter·移动开发·flutter教程·移动开发教程
欧阳天风23 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder27 分钟前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理27 分钟前
架构解析:同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活
沐墨染29 分钟前
大型数据分析组件前端实践:多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互