Mac OS 配置Flutter 环境变量

- 日理万妓 2023-10-01 08:02 16阅读 0赞

由于刚开始使用mac 系统，还不是很熟悉，遇到了一些坑，所以希望这些能帮助大家。

> **注意，本文中所有用\[\]包起来的，都是用于方便阅读，需要复制时直接复制里面的内容，不要复制这个括号**

### 1.下载Flutter SDK ###

这里是官方下载链接 [地址][Link 1]， 选择这个\[Stable channel (macOS)\] 里最新的就可以啦，下载完成后解压放到本地目录中，然后将路径复制下来备用，示例如下：/Users/Acen/Flutter/flutter，(**注意**：一定要是你本地解压出来的那个文件夹的全路径)

### 2.配置环境变量 ###

这是我最艰难的一步  
由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，以下前两行这是我在官网直接复制来的镜像地址，具体以官网为准 [官网地址][Link 2]

> export PUB\_HOSTED\_URL=https://pub.flutter-io.cn  
> export FLUTTER\_STORAGE\_BASE\_URL=https://storage.flutter-io.cn  
> export FLUTTER\_HOME=/Users/gaofengsen/Flutter/flutter  
> export PATH=$FLUTTER\_HOME/bin:$PATH

后两行是需要配置的变量，**注意**：需要将 \[FLUTTER\_HOME=\] 后面的路径替换为第一步我说到让你备份下来的路径。  
如果你是mac的老用户，可能你已经拿着上面的直接开始操作了，新用户可能一脸懵，我们一步一步来。

1.第一步，打开终端，输入 \[vim /etc/profile\] (注:vim后面就是有个空格的)，然后回车，会进入到文件内容页.(有关vim常用命令，建议先参考这个 [博客地址][Link 3])

2.第二步

*  1.按住键盘上的i，进入插入/编辑模式，
 *  2.把上面那四个**经过你修改后**的变量，粘贴到窗口里。
 *  3.粘贴完之后，按esc退出插入模式。键入以下内容\[:wq\]用于保存并退出当前窗口，(不要直接点左上角的x结束当前窗口)。在你输入后如果它提示你如下错误(如没提示错误，直接进入·4 )：

> MAC ‘readonly‘ option is set (add ! to override)  
> \-该错误为当前用户没有权限对文件作修改

那我们就使用\[:w !sudo tee %\]命令用于解决上面的错误。  
如果让你输入密码

> 输入完密码后，根据提示回车就可以了，然后再键入\[:q\]关闭当前窗口。

如果没有让你输入

> 建议关闭当前窗口，重新在命令行输入\[sudo passwd root\]创建root密码，随后重新走一遍流程(即从第一步重新开始)

*  4.完成 ·3 之后，这个时候你应该回到了最初的那个窗口，然后我们键入  
    \[source /etc/profile\] 使刚才的配置生效![这是展示最初的那个窗口][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]
 *  5.键入\[flutter --version\]查看是否成功，如出现以下内容，即成功  
    ![在这里插入图片描述][66f1e2ddcc6a483b99acd49990db20c1.png_pic_center]
 *  6.键入\[flutter doctor\] 用于检查flutter是否有配置错误,如图,我们一个个解决  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]
 *  7.看第一个错误\[cmdline-tools component is missing\]，这个其实就是说我们Android SDK tools缺失，打开我们的Android Studio进入设置页面，按照步骤进行操作，下载完成后，记得重启Android Studio  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
    接下来我们在终端重新键入\[flutter doctor\]查看是否成功，如果没有，请检查那四个是否全部勾选并下载，并且你是在重启完Androdi Sutdio后执行的命令。如果出现下图  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]  
    说明我们刚才的已经生效，然后我们按照命令行的提示键入  
    \[flutter doctor --android-licenses\]来同意协议，接下来跟着提示一路按y就可以了。最后我们再次键入 \[flutter doctor\]，出现如下内容，就代表第一个问题已经解决了  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]  
    到这里，你就可以下载相关的ide来运行flutter了，如果你是Android 开发可以直接使用Android Studio进行配置，具体使用，详见 [Flutter中文网入门教程][Flutter] ，另外有关 X code 和 Android Studio 的配置我在学习后会发一篇文章来记录。

最后，感谢这几位大佬的文章 [mac os flutter环境搭建][mac os flutter] 、[错误解决][Link 4]、 [mac vim 保存退出\_linux中vim常见用法址][Link 3]、[cmdline-tools component is missing][]

[Link 1]: https://docs.flutter.dev/development/tools/sdk/releases?tab=macos#macos
[Link 2]: https://flutterchina.club/setup-macos/
[Link 3]: https://blog.csdn.net/weixin_39856055/article/details/111269166?utm_term=macosvim%E4%BF%9D%E5%AD%98%E5%91%BD%E4%BB%A4&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-1-111269166&spm=3001.4430
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/3feb869d6ee54ea1ad814c695f63bf34.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUzEwNjY0MzA0NzY=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[66f1e2ddcc6a483b99acd49990db20c1.png_pic_center]: https://img-blog.csdnimg.cn/66f1e2ddcc6a483b99acd49990db20c1.png#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/89bd2910a2fd443185f9894d5e135a02.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUzEwNjY0MzA0NzY=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: https://img-blog.csdnimg.cn/2505a2251f20419ca5ac108c853b927c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUzEwNjY0MzA0NzY=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: https://img-blog.csdnimg.cn/ce5d837edeec432cbd4a5629ac732ac8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUzEwNjY0MzA0NzY=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAUzEwNjY0MzA0NzY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: https://img-blog.csdnimg.cn/aface3ceff064467ae9d8fa78a0986c5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUzEwNjY0MzA0NzY=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[Flutter]: https://flutterchina.club/get-started/install/
[mac os flutter]: https://blog.csdn.net/sunxiaoju/article/details/88545984
[Link 4]: https://blog.csdn.net/everljs/article/details/108150467
[cmdline-tools component is missing]: https://blog.csdn.net/weixin_41824429/article/details/118942087