高傲飞翔 發表於 2020-7-10 14:44:00

Mac配置前端开发环境及遇到的问题与解决方案

<h1 style="text-align: center">Mac配置前端开发环境及遇到的问题与解决方案</h1>
<p>MacOS版本：10.15.3</p>
<h2>一，安装brew</h2>
<p><strong><span style="color: rgba(255, 153, 0, 1)">问题：</span></strong>curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused的解决办法</p>
<p><strong><span style="color: rgba(51, 153, 102, 1)">解决方案：</span></strong>打不开的网址，就是这个网址<code>https://raw.githubusercontent.com/Homebrew/install/master/install</code>，对应的内容就是 <code>brew_install.rb</code></p>
<p>百度网盘下载，提取码：e928</p>
<p>1.进入 存放&nbsp;<code>brew_install.rb</code>的目录中</p>
<p>2.执行&nbsp;<code>ruby brew_install.rb</code>,根据提示 安装配置就行了</p>
<h2>二，安装node多版本管理工具nvm</h2>
<p>方便不同年代的项目运行</p>
<h3>2.1,安装nvm</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> brew install nvm</pre>
</div>
<h3>2.2,配置nvm</h3>
<h4>1，创建.nvm文件夹</h4>
<div class="cnblogs_code">
<pre>mkdir ~/.nvm</pre>
</div>
<h4>2，添加<span class="s1">.zshrc文件，并添加如下内容</span></h4>
<div class="cnblogs_code">
<h4><span style="color: rgba(0, 128, 128, 1)">1</span> export NVM_DIR=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">$HOME/.nvm</span><span style="color: rgba(128, 0, 0, 1)">"</span> <span style="color: rgba(0, 128, 128, 1)">2</span> [ -s <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/usr/local/opt/nvm/nvm.sh</span><span style="color: rgba(128, 0, 0, 1)">"</span> ] &amp;&amp; . <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/usr/local/opt/nvm/nvm.sh</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)"> # This loads nvm </span><span style="color: rgba(0, 128, 128, 1)">3</span> [ -s <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/usr/local/opt/nvm/etc/bash_completion.d/nvm</span><span style="color: rgba(128, 0, 0, 1)">"</span> ] &amp;&amp; . <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/usr/local/opt/nvm/etc/bash_completion.d/nvm</span><span style="color: rgba(128, 0, 0, 1)">"</span> # This loads nvm bash_completion</h4>
</div>
<p>运行如下命令即可编辑，如果没有，则会创建对应的文件</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> vim ~/.zshrc </pre>
</div>
<p>但是此种方法只对本次有效，如需持久有效，需要写入 /Users// 目录中的&nbsp;<code>.bash_profile</code>&nbsp;文件中才能生效；如果 /Users// 目录没有&nbsp;<code>.bash_profile</code>&nbsp;文件，需要创建&nbsp;<code>.bash_profile</code>&nbsp;文件；</p>
<p><strong>a、创建环境变量配置文件</strong></p>
<div class="cnblogs_code">
<pre>1 touch .bash_profile</pre>
</div>
<p><strong>b、打开并编辑配置文件</strong></p>
<div class="cnblogs_code">
<pre>1 open .bash_profile</pre>
</div>
<p>输入配置内容：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> export NVM_DIR=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">$HOME/.nvm</span><span style="color: rgba(128, 0, 0, 1)">"</span>
<span style="color: rgba(0, 128, 128, 1)">2</span>   [ -s <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/usr/local/opt/nvm/nvm.sh</span><span style="color: rgba(128, 0, 0, 1)">"</span> ] &amp;&amp; . <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/usr/local/opt/nvm/nvm.sh</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)"># This loads nvm
</span><span style="color: rgba(0, 128, 128, 1)">3</span>   [ -s <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/usr/local/opt/nvm/etc/bash_completion.d/nvm</span><span style="color: rgba(128, 0, 0, 1)">"</span> ] &amp;&amp; . <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">/usr/local/opt/nvm/etc/bash_completion.d/nvm</span><span style="color: rgba(128, 0, 0, 1)">"</span># This loads nvm bash_completion</pre>
</div>
<p><strong>c、使配置生效</strong></p>
<div class="cnblogs_code">
<pre>1 source .bash_profile</pre>
</div>
<p>这样 nvm 就可以用了，执行&nbsp;<code>nvm --version</code>&nbsp;会看到 nvm 的安装版本</p>
<h4>3,nvm常用命令</h4>
<div class="cnblogs_code">
<pre>nvm install             # 安装指定版本，e.g. `nvm install v10.<span style="color: rgba(128, 0, 128, 1)">15.3</span><span style="color: rgba(0, 0, 0, 1)">`
nvm use                   # 指定当前使用的 Node.js 版本，e.g. `nvm use v10.</span><span style="color: rgba(128, 0, 128, 1)">15.3</span><span style="color: rgba(0, 0, 0, 1)">`
nvm current                            # 查看当前使用的 Node.js 版本
nvm ls                                 # 查看当前安装的 Node.js 版本列表，`nvm list` 也可以查看当前安装列表
nvm ls</span>-<span style="color: rgba(0, 0, 0, 1)">remote                        # 查看远程服务器上可用的安装版本
nvm uninstall             # 删除指定版本的 Node.js，用法类似于 install 命令
nvm reinstall</span>-<span style="color: rgba(0, 0, 0, 1)">packages     # 在当前的 Node.js 版本下，安装指定版本的 npm 包管理器
nvm alias </span><span style="color: rgba(0, 0, 255, 1)">default</span>       # 设置默认 Node.js 版本，e.g. `nvm alias <span style="color: rgba(0, 0, 255, 1)">default</span> v10.<span style="color: rgba(128, 0, 128, 1)">15.3</span><span style="color: rgba(0, 0, 0, 1)">`
nvm cache clear                        # 清除 nvm 缓存</span></pre>
</div>
<h2>三，安装配置svn</h2>
<h4>1、去appstore搜索“svn”，下载第一个snailSvn的精简版即可</h4>
<p><img src="https://img2020.cnblogs.com/blog/1040068/202006/1040068-20200602205605318-1252375487.png" alt=""></p>
<h4>2、安装好之后，持续点击 下一步, 然后会自动弹窗扩展窗口，需要在第三方扩展中添加一下访达</h4>
<p><img src="https://img2020.cnblogs.com/blog/1040068/202006/1040068-20200602205813696-1241099344.png" alt=""></p>
<p>&nbsp;如果已安装好，也可通过打开偏好设置添加，如下：</p>
<p><img src="https://img2020.cnblogs.com/blog/1040068/202006/1040068-20200602205923620-861674822.png" alt=""></p>
<h4>3、新建一个文件夹后，可以在访达中检出&nbsp;</h4>
<p><img src="https://img2020.cnblogs.com/blog/1040068/202006/1040068-20200602210313435-2090075972.png" alt=""></p>
<p>&nbsp;选择检出之后弹出如下弹窗</p>
<p><img src="https://img2020.cnblogs.com/blog/1040068/202006/1040068-20200602210403229-1850299564.png" alt=""></p>
<p>&nbsp;输入代码库地址以及检出到的文件夹地址，点击确认之后会弹窗账户名以及密码的输入框，输入之后确认即可检出对应的代码啦</p>
<h4>4、在vs code中配置svn</h4>
<p>在vs code中搜索下载svn即可</p>
<p><img src="https://img2020.cnblogs.com/blog/1040068/202006/1040068-20200602215146467-1291117889.png" alt=""></p>
<p><strong><span style="color: rgba(255, 153, 0, 1)">问题：</span></strong>在macos10.15.3版本中使用svn报如下错误</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> svn: error: The subversion command line tools are no longer provided by Xcode.</pre>
</div>
<p><strong><span style="color: rgba(51, 153, 102, 1)">解决办法：</span></strong>卸载之后重新安装</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> sudo rm -rf /Library/Developer/CommandLineTools</pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> xcode-<span style="color: rgba(0, 0, 255, 1)">select</span> --install</pre>
</div>
<h2>四，mac上使用HBuilderX遇到的问题</h2>
<h3>4.1，HBuilderX运行uniapp项目的问题</h3>
<p><strong><span style="color: rgba(255, 153, 0, 1)">问题：</span></strong>使用uniapp的app运行到真机报node-sass错，如下：</p>
<div class="cnblogs_code">
<pre>Node Sass could not find a binding <span style="color: rgba(0, 0, 255, 1)">for</span> your current environment: OS X <span style="color: rgba(128, 0, 128, 1)">64</span>-bit with Node.js <span style="color: rgba(128, 0, 128, 1)">8</span>.x <span style="color: rgba(128, 0, 128, 1)">10</span>:<span style="color: rgba(128, 0, 128, 1)">52</span>:<span style="color: rgba(128, 0, 128, 1)">46.052</span> Found bindings <span style="color: rgba(0, 0, 255, 1)">for</span><span style="color: rgba(0, 0, 0, 1)"> the following environments:
OS X </span><span style="color: rgba(128, 0, 128, 1)">64</span>-bit with Node.js <span style="color: rgba(128, 0, 128, 1)">10</span>.x</pre>
</div>
<p>为了方便控制，我创建uniapp的时候使用的是npm管理的，而不是深度依赖HBuilderX，这样是更自由点。</p>
<p>但是打包与测试的时候还是希望使用HBuilderX，方便，不用安装那么多东西。</p>
<p>这样是产生了一个偏差点，我开发的时候使用的是本机的node，查看下node的版本：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> $ node -<span style="color: rgba(0, 0, 0, 1)">v
</span><span style="color: rgba(0, 128, 128, 1)">2</span> v10.<span style="color: rgba(128, 0, 128, 1)">15.3</span></pre>
</div>
<p>而HBuilderX有个内置的node，是v8.x的。</p>
<p>在打包发布或运行的时候会使用HBuilderX内置的node，所以是会报错的。</p>
<p>总结来说，我们<code>node_module</code>下的包是用高版本的node生成的，但是在打包或运行的时候使用的HBuilderX里面的低版本的node，所以就会找不到需要的东西。</p>
<p><strong><span style="color: rgba(51, 153, 102, 1)">解决办法：</span></strong>解决的方法有多种，但我们这里已经使用了npm的形式开发，那么我们打包最好还是保持同样的环境，省的麻烦。所以我们告诉HBuilderX使用我们本机的node即可。</p>
<p>在windows上暂未遇到此问题，以下主要介绍mac上的解决方案：</p>
<p><strong>a,进入HBuilderX自带的node下面，将node重命名即可备份：</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 128, 1)">1</span> $ cd /Applications/HBuilderX.app/Contents/HBuilderX/plugins/<span style="color: rgba(0, 0, 0, 1)">node
</span><span style="color: rgba(0, 128, 128, 1)">2</span> $ mv node node-v8</pre>
</div>
<p><strong>b,添加本机node的软链接:</strong></p>
<div class="cnblogs_code">
<pre>$ ln -s /Users//.nvm/versions/node/v10.<span style="color: rgba(128, 0, 128, 1)">15.3</span>/bin/node /Applications/HBuilderX.app/Contents/HBuilderX/plugins/node/node</pre>
</div>
<p>重启HBuilderX即可。</p>
<h3>4.2，使用iOS模拟器的问题</h3>
<p><strong><span style="color: rgba(255, 153, 0, 1)">问题：</span></strong>xcode已安装，但是HBuilderX检测不到ios模拟器</p>
<p><strong><span style="color: rgba(51, 153, 102, 1)">解决方案：</span></strong></p>
<ol>
<li>打开xcode，点击菜单<code>xcode</code>&nbsp;---&gt;&nbsp;<code>perferences</code></li>
<li>点击<code>locations</code>，如下</li>
<li>找到<code>command lines tools</code>，选中下拉菜单</li>
</ol>
<p><img src="https://img2020.cnblogs.com/blog/1040068/202006/1040068-20200602213509492-1369452355.png" alt=""></p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/jackson-yqj/p/13033530.html
頁: [1]
查看完整版本: Mac配置前端开发环境及遇到的问题与解决方案