MacOS 中 Flutter 的环境配置与填坑记录

2019-04-23  本文已影响0人  猴子的饼干

Flutter 出来也已经有点时日了，相对于RN的跨平台开发的方案，笔者更喜欢Flutter的理念。

搭建个环境先
（Xcode, Andoird studio等开发工具可以提前安装好）

Flutter-Using in China
Flutter中文网

Flutter对国内开发者算友好，镜像啥的也都考虑到了，配置环境的流程就不再赘述了，不出问题的话，参考这两个网址就足够了。

由于前段时间重装过系统，电脑只安装了iOS相关工具(如CocoaPods)和Android Studio, VS Code等IDE，还算纯净吧?!。

以下为官网给出的通过git仓库的方式安装Flutter的方式:

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

以下为填坑记录

git仓库clone失败

这是官网给出的配置Flutter的方式，在clone库的时候，因为网络等因素可能会导致多次失败，这是正常现象，也可以尝试借助【科xue】方式。
（帅气的笔者也多次尝试后才clone成功，在公司的一个网段下一直失败，回家后一次成功）

PATH 配置错误导致的各种问题

笔者在进行到flutter doctor时，报出了不能识别flutter命令的错误。后发现笔者的PATH配置有问题，系统并未正确的找到flutter的路径，参考官网链接中更新环境变量部分来配置PATH

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

这里要注意，PATH_TO_FLUTTER_GIT_DIRECTORY 是flutter的路径，每个人安装的位置不同，例如笔者的安装路径就在“~/Users/用户名/”下。
可笔者设置好后并未见效，且按照文档上使用(source $HOME/.bash_profile)的刷新当前终端窗口时，又报错了...所以问题集中到了bash_profile这个文件配置上。

.bash_profile的配置问题

笔者的电脑重装过，配置PATH后始终不成功，且在home目录下没有“.bash_profile”。那就手动创建配置一个:

  1. 打开终端
  2. "$ cd ~":跳转到根目录
  3. "$ touch .bash_profile":创建.bash_profile文件
  4. "$ open -e .bash_profile":以编辑的方式打开.bash_profile文件
  5. 将我们需要的配置添加进来:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

(再次注意: PATH_TO_FLUTTER_GIT_DIRECTORY是flutter的安装路径)

  1. "$ source .bash_profile" 刷新当前终端窗口

笔者到这一步系统就能够调用flutter相关命令了。

一个小插曲:
在这一步出现过，flutter命令无效，且其他命令(如pod)系统全部不能识别，打印PATH为空! 吓得我立刻重置PATH。
($ export PATH=/bin:/usr/bin:/usr/local/bin)
重置后，除flutter外的命令都恢复正常，笔者重复更新PATH的步骤后恢复正常，具体原因已无从查证。

“flutter doctor”命令报出的各种错误和警告

运行"flutter doctor"命令后，系统会检测flutter的开发环境还缺啥东西。


flutter doctor 检测

如图所示，还有很多东西没配置好，也给出了具体的命令与方法。分别照着提示做就行:

[iOS] : 照着给出的命令一行一行运行(没安brew的先安装)

[Android] : 提示Flutter插件没有安装，解决方法直接打开Android Studio 在 configure的plugins里面搜索Flutter,搜索出来直接安装(install)就好。

[VS Code] : 直接进入提示的网址，安装的时候会自动打开本地的VS Code.

“No devices available”

这个警告不用管它。
表示当前的设备，在开发过程中，选择模拟器或真机都行。笔者在VS Code中选好调试模拟器后，这个警告就变正常了。

打完收工

在flutter doctor检测成功后，笔者照着文档在VS Code中创建了个应用，运行效果如下:


效果图

当然也可以使用Android Studio来开发，看个人爱好。

其他问题记录

1）Error connecting to the service protocol: HttpException: Connection closed before full header was received, uri = XXXXXXXXXX”

描述: 在iOS模拟器、iOS真机、Andorid真机均可正常运行，但在Android模拟器上一直报此错误。
解决: 因笔者的模拟器是最新的“Andorid9.+”，在将模拟器系统降为9.0正式版后恢复正常。
Tips: 在查阅资料的过程中发现此问题不一定是系统版本引发，其他原因可通过尝试重启模拟器和IDE，关闭网络代理、关闭wifi调试等方式修复。

2）Could not install build/ios/iphoneos/Runner.app on xxxxxxxxxxxxxxx.Try launching Xcode and selecting "Product > Run" to fix the problem:open ios/Runner.xcworkspace

描述: 在iOS真机调试时报出此错误导致无法真机运行，提示中让使用Xcode运行调试。
解决: 每次都使用Xcode太麻烦，而我们报错时，真机上已经安装好了应用，此时只需要在iOS设备的“设置->通用->设备管理”中信任我们应用的开发者就可以直接运行，不用使用Xcode.
Tips: 这个问题是因为作者在Xcode中配置BundleID时用的是自己的账号(未付费)，权限操作与企业证书类似，需要在真机信任开发者。

上一篇下一篇

猜你喜欢

热点阅读