Vue开发环境npm和Yarn的环境变量配置（Windows 10 版）

「爱情、让人受尽委屈。」 2023-07-24 08:46 12阅读 0赞

### 目录 ###

*  一、Nodejs
 *   *  \*\*（1）Nodejs安装\*\*
     *  \*\*（2）Nodejs配置\*\*
 *  二、Yarn
 *   *  \*\*（1）Yarn简介：\*\*
     *  \*\*（2）Yarn安装\*\*
     *  \*\*（3）配置prefix和cache目录\*\*
     *  \*\*（4）配置环境变量\*\*
     *  \*\*（5）Yarn 配置阿里源量\*\*

> 已搬家至简书：[https://www.jianshu.com/p/0d69cb838ae5][https_www.jianshu.com_p_0d69cb838ae5]

# 一、Nodejs #

## **（1）Nodejs安装** ##

这一步很简单，下载Windows版的Nodejs，进行按照提示安装即可，记得选择将nodejs增加到PATH一项，如果界面上没有，应该就是默认帮你搞定了，可以忽略我这句废话。

通过命令，验证是否安装成：

node -v
    
    npm -v

如果正常显示版本号，即安装成功。

## **（2）Nodejs配置** ##

Nodejs安装完成之后，默认会将node.exe的路径，添加到系统的环境变量中，如果没有请手动添加。除此之外还要进行其他的配置。

**1、配置prefix和cache目录**

*  改变npm 全局安装位置

npm config set prefix "你的磁盘路径"

示例目录地址为：C:\\Program Files\\nodejs

npm config set prefix “C:\Program Files\nodejs\node_global”

*  改变 npm 缓存位置

npm config set cache "你的磁盘路径"

示例目录地址为：C:\\Program Files\\nodejs

npm config set cache  “C:\Program Files\nodejs\node_cache

**2、配置环境变量**  
右击“计算机”—>“属性”—>“高级系统设置”—>“环境变量”

**在"系统变量"中,设置 NODE\_PATH**  
在系统变量里新建 NODE\_PATH ,值为

C:\Program Files\nodejs\node_global\node_modules

> 这个值就是上一步中，通过 **“npm config set prefix”** 设置的值。可以，用下面命令查看
> 
>     npm config get prefix

**在"用户变量"中,修改path**  
修改用户变量中的path，添加

C:\Program Files\nodejs\node_global\bin

> 这个值就是上一步中，通过 **“npm config set prefix”** 设置的值。

**3、配置阿里源**

npm config set registry https://registry.npm.taobao.org

# 二、Yarn #

## **（1）Yarn简介：** ##

yarn是facebook发布的一款取代npm的包管理工具。

yarn的特点：

*  速度超快。Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
 *  超级安全。在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
 *  超级可靠。使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。

## **（2）Yarn安装** ##

*  方式一：使用npm安装

npm install -g yarn

*  方式二：使用安装文件安装

> 即在官网中下载exe文件安装（Windows），其它系统根据实际情况安装。

## **（3）配置prefix和cache目录** ##

*  改变 yarn 全局安装位置

yarn config set global-folder "你的磁盘路径"

示例目录地址为：C:\\Program Files\\yarn

yarn config  set global-folder "C:\Program Files\yarn\global"

*  改变 yarn 缓存位置

yarn config set cache-folder "你的磁盘路径"

示例目录地址为：C:\\Program Files\\yarn

yarn config cache-folder "C:\Program Files\yarn\cache"

> 或者在你的用户目录找到 `.yarnrc` 的文件，打开它，直接进行编辑

## **（4）配置环境变量** ##

在我们使用**全局安装**包的时候，会在 “C:\\Program Files\\yarn\\global”（上面的示例路径，要根据自己的实际情况配置） 下生成 node\_modules.bin 目录

我们需要将 C:\\Program Files\\yarn\\global\\node\_modules.bin 整个目录 添加到**系统环境变量**中去，否则通过yarn 添加的全局包 在cmd 中是找不到的。

检查当前yarn 的 bin的 位置

yarn global bin

检查当前 yarn 的 全局安装位置

yarn global dir

## **（5）Yarn 配置阿里源量** ##

**1、查看一下当前源**

yarn config get registry

**2、切换为淘宝源**

yarn config set registry https://registry.npm.taobao.org
    yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
    yarn config set phantomjs_cdnurl "http://cnpmjs.org/downloads"
    yarn config set electron_mirror "https://npm.taobao.org/mirrors/electron/"
    yarn config set sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
    yarn config set profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
    yarn config set chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

[https_www.jianshu.com_p_0d69cb838ae5]: https://www.jianshu.com/p/0d69cb838ae5