国思软件 - 技术文章 - 使用nvm管理node版本,方便vue2，vue3开发

在Vue项目开发过程中，我们常常会遇到同时维护Vue2和Vue3项目的情况。由于不同版本的Vue对Node.js 版本的要求有所差异，这就使得Node.js 版本管理成为了一个关键问题。[NVM](https://nvm.uihtm.com/)（Node Version Manager）作为一款强大的Node.js 版本管理工具，能够帮助我们轻松地在不同版本之间进行切换，极大地提高开发效率。接下来，本文将详细介绍如何使用NVM来管理Node.js 版本，以满足Vue2和Vue3项目的开发需求。

![nvm](http://doc.rdiframework.net/rdiblog/20250217155331.png)

## 一、为什么需要使用NVM

Vue2和Vue3在技术架构和性能优化上有很大的不同，这导致它们对Node.js 版本的要求也不尽相同。Vue3在很多新特性的实现上依赖于较新的Node.js 版本，而一些Vue2项目可能由于兼容性等原因，更适合在特定的旧版本Node.js 环境下运行。如果没有有效的版本管理工具，每次在不同项目间切换时，都需要卸载并重新安装相应版本的Node.js ，这不仅繁琐，还容易出现环境配置错误等问题。NVM的出现，很好地解决了这一困扰，它允许我们在同一台机器上安装多个Node.js 版本，并能快速切换，确保每个项目都能在合适的Node.js 环境中稳定运行。

## 二、使用NVM切换Node版本的步骤

### （一）完全删除之前的Node及npm

在安装NVM并切换Node版本之前，需要先将之前安装的Node及npm彻底清理干净，包括应用程序、缓存文件以及环境变量。具体操作如下：

1. **清除npm缓存**：打开cmd命令窗口，输入 `npm cache clean --force` 并回车执行，以清除npm缓存。
2. **卸载Node.js 应用程序**：打开“程序与功能”卸载界面，找到“node.js ”，点击卸载。
3. **删除相关环境变量**：打开环境变量设置窗口，检查并删除所有与Node相关的环境变量。卸载完成后，可以在命令行中输入 `npm -v` 和 `node -v` 查看是否还有残留版本信息，之后最好重启一下电脑，确保卸载彻底。

### （二）安装NVM

1. **下载安装包**：从官网（[https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases) ）下载适合Windows系统的NVM安装包。

![nvm安装包](http://doc.rdiframework.net/rdiblog/20250217155339.png)

2. **以管理员身份安装**：下载完成后，右键点击安装包，选择“以管理员身份打开”，然后按照安装向导的提示进行安装。在安装过程中，需要选择NVM的安装路径以及Node.js 的安装路径，用户可以根据自己的需求进行选择。指定一个默认的安装位置 (D:\nvm\nvm-install) 和nodejs的位置 (D:\nvm\nodejs)，这个路径上下文要统一。

### （三）安装Node.js 版本

1. **查看可用版本**：安装完成NVM后，以管理员身份打开cmd命令窗口，输入 `nvm list available` 命令，查看当前可下载的Node.js 版本列表。一般建议安装LTS（长期支持）版本，以确保稳定性。

2. **安装指定版本**：根据项目需求，选择需要安装的Node.js 版本进行下载安装。例如，咱们的项目若要安装针对vue2的Node.js 16.13.1和针对vue3的node.js 18.14.2版本，在命令行中分别输入 `nvm install 16.13.1` 和 `nvm install 18.14.2` ，等待下载和安装完成。

![nvm install 16.13.1](http://doc.rdiframework.net/rdiblog/20250217155345.png)

![nvm install 18.14.2](http://doc.rdiframework.net/rdiblog/20250217155348.png)

在我们对应的目录下已经安装了对应版本的node.js，如下图所示。

![node版本](http://doc.rdiframework.net/rdiblog/20250217155353.png)

### （四）替换NVM自动下载的Node包（可选）

由于NVM自动下载的Node包可能存在问题，我们可以到Node.js 的官网上将相应版本的Node包下载下来，替换掉NVM目录下的对应版本的Node包。Node.js 官方下载地址：https://nodejs.org/zh-cn/download/releases/ 。

### （五）检查安装是否成功

安装完成后，重启电脑，再次以管理员身份打开cmd命令窗口，输入 `nvm list` 命令。如果出现之前安装的Node.js 版本列表，则说明NVM安装及Node.js 版本安装均成功。

![nvm list](http://doc.rdiframework.net/rdiblog/20250217155402.png)

### （六）切换Node版本

在不同的Vue项目开发中，根据项目对Node.js 版本的要求，使用以下命令进行版本切换：`nvm use [version]`，例如，若要切换到Node.js 18.14.2版本，在命令行中输入 `nvm use 18.14.2` 即可。如果切换过程中出现乱码问题，可以尝试再次以管理员身份打开cmd命令窗口，重新执行切换命令。

![nvm use 18.14.2](http://doc.rdiframework.net/rdiblog/20250217155407.png)

我们再执行`nvm list`，可以看到前面带*的就是当前正在使用的node版本。

![nvm list](http://doc.rdiframework.net/rdiblog/20250217155411.png)

执行`npm config set registry https://registry.npmmirror.com ` 使用这个命令安装镜像源。

此时使用vue命令会提示找不到此命令，使用 `npm install -g @vue/cli `命令安装vue命令。

这一步很重要：在系统变量的 Path 中配置环境变量 `D:\nvm\nodejs\node_global`，不然会提示找不到node命令

### （七）nvm切换国内镜像

如果下载node过慢或者安装失败，请更换国内镜像源, 在 nvm 的安装路径下，找到 settings.txt，设置node_mirro与npm_mirror为国内镜像地址。下载就飞快了
`nvm npm_mirror https://npmmirror.com/mirrors/npm/`
`nvm node_mirror https://npmmirror.com/mirrors/node/`
`或者：`
`node_mirror: https://npm.taobao.org/mirrors/node/`
`npm_mirror: https://npm.taobao.org/mirrors/npm/`

**命令行切换(注意：请切换国内镜像后再安装node版本，否则会很慢)**

##### 阿里云镜像

```
nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/
```

##### 腾讯云镜像

```
nvm npm_mirror http://mirrors.cloud.tencent.com/npm/
nvm node_mirror http://mirrors.cloud.tencent.com/nodejs-release/
```

打开链接查看可以node版本：https://registry.npmmirror.com/binary.html?path=node/

nvm默认安装后，还可以通过修改他的配置文件，来配置nvm下载node和npm的下载路径。

打开nvm的安装目录，双击settings.txt

![setting.txt](http://doc.rdiframework.net/rdiblog/20250217155417.png)

添加如下路径后保存（指定如下路径，下载node和npm时会更快）

```c#
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
```

![配置文件](http://doc.rdiframework.net/rdiblog/20250217155425.png)

## 三、配置全局安装的模块路径和缓存路径

### 1、在nvm的安装目录下创建如下空目录

![node_cache、node_global](http://doc.rdiframework.net/rdiblog/20250217155432.png)

### 2、创建完两个文件夹后，在cmd窗口中输入以下命令

双引号中的路径是上一步中创建的两个文件夹的路径

```
npm config set prefix "D:\nvm\nvm-install\node_global"
npm config set cache "D:\nvm\nvm-install\node_cache"
```

![image-20250217150630788](http://doc.rdiframework.net/rdiblog/20250217155438.png)

### 3、配置环境变量

![用户环境变量](http://doc.rdiframework.net/rdiblog/20250217155441.png)

![系统环境变量](http://doc.rdiframework.net/rdiblog/20250217155447.png)

![新建一个NODE_PATH的系统环境变量](http://doc.rdiframework.net/rdiblog/20250217155453.png)

### 4、全局安装yarn

```
npm install yarn -g
```

![安装yarn](http://doc.rdiframework.net/rdiblog/20250217155502.png)

给yarn设置淘宝镜像，刚安装yarn，执行下面命令会报错，可以重新打开命令行窗口执行。

```
yarn config set registry http://registry.npm.taobao.org/
```

![给yarn设置淘宝镜像](http://doc.rdiframework.net/rdiblog/20250217155513.png)

查看镜像

```
yarn config get registry
```

![查看yarn镜像](http://doc.rdiframework.net/rdiblog/20250217155518.png)

## 四、NVM常用命令总结

- **`nvm list [available]`**：列出已经安装的Node.js 版本；添加 `available` 参数，可显示可下载版本的部分列表，此命令也可简写为 `nvm ls [available]`。
- **`nvm install [version][arch]`**：安装指定版本的Node.js ，`[arch]` 可选参数用于指定安装32位或64位版本（默认为系统当前架构）。在命令后面添加 `–insecure`，可以绕过远端下载服务器的SSL验证。
- **`nvm uninstall [version]`**：卸载指定版本的Node.js 。
- **`nvm use [version][arch]`**：切换到使用指定的Node.js 版本，同样可指定32/64位 `[arch]`。
- **`nvm on`**：启用Node.js 版本管理。
- **`nvm off`**：禁用Node.js 版本管理（不卸载任何东西）。
- **`nvm proxy [url]`**：设置用于下载的代理。留 `[url]` 空白，可查看当前的代理；设置 `[url]` 为 `none` 则删除代理。
- **`nvm node_mirror [url]`**：设置Node镜像，默认为https://nodejs.org/dist/ ，也可以设置为淘宝的镜像https://npm.taobao.org/mirrors/node/ 。
- **`nvm npm_mirror [url]`**：设置npm镜像，默认为https://github.com/npm/npm/archive/ ，也可以设置为淘宝的镜像https://npm.taobao.org/mirrors/npm/ 。
- **`nvm version`**：显示当前运行的NVM版本，可简写为 `nvm v`。

## 五、NVM切换Node版本常见问题

在使用NVM切换Node版本时，常见的问题及解决方法如下：

### （一）切换版本后乱码

- 权限不足：这是最常见的导致乱码的原因。

- **解决方法**：找到命令提示符（即cmd），右键点击“更多”，选择“以管理员身份运行”，然后再使用 `nvm use` 命令来切换版本。也可以右键点击开始菜单按钮，选择“Windows PowerShell(管理员)”，在其中执行 `nvm use [node版本号]` 命令。

- 路径问题：nvm安装路径包含中文或空格，可能会导致乱码问题。

- **解决方法**：首先从系统中卸载干净node和nvm，然后重新安装nvm，安装路径和node路径不能带有中文和空格，建议在C盘下新建文件夹，并将nvm和node都安装在其中，重新安装后即可解决。同时，还需检查 `setting.txt` 文件里面的路径是否与实际安装路径一致。

### （二）切换版本无效

- 未正确安装nvm或nodejs：nvm或nodejs安装过程中出现问题，可能导致版本切换无效。

- **解决方法**：卸载nvm和nodejs后，重新进行安装，安装时确保按照正确步骤操作。

- 环境变量配置不正确：环境变量配置错误，nvm无法正确识别和切换版本。

- **解决方法**：打开设置系统，进入“系统信息”，点击“高级系统设置”，选择“环境变量”，检查用户变量和系统变量中与nvm和nodejs相关的环境变量配置是否正确。新建变量 `NVM_HOME`，值设为nvm的安装路径；新建变量 `NVM_SYMLINK`，值设为nvm安装路径下的 `nodejs` 文件夹路径。

- 之前安装的node版本影响：之前安装的node版本可能干扰了nvm的切换。

- **解决方法**：找到之前安装的node版本所在的文件夹并删除，然后使用 `nvm install [目标版本号]` 重新安装目标版本，再使用 `nvm use [目标版本号]` 进行切换。

### （三）npm没有指令

- 环境变量问题：环境变量配置不正确，可能导致系统无法找到npm指令。

- **解决方法**：检查环境变量中与npm相关的路径是否正确配置。一般来说，需要将npm的安装路径添加到系统的 `Path` 环境变量中。

- nvm与npm的关联问题：nvm与npm之间的关联出现问题，导致npm指令无法正常使用。

- **解决方法**：将 `用户名/AppData/Roaming/nvm/nodejs/node_modules/npm/bin` 路径下的 `npm` 和 `npm.cmd` 两个文件拷贝到需要的对应node版本的根目录下。

### （四）安装特定版本Node.js 失败

- 网络问题：网络不稳定或下载源问题可能导致安装失败。

- **解决方法**：检查网络连接是否正常，尝试更换下载源。可以设置NVM的镜像源，例如将 `nvm node_mirror` 设置为淘宝的镜像 `https://npm.taobao.org/mirrors/node/` ，将 `nvm npm_mirror` 设置为 `https://npm.taobao.org/mirrors/npm/` 。

- 权限问题：安装过程中权限不足，可能导致无法写入文件。

- **解决方法**：以管理员身份运行安装命令或安装程序。

### （五）安装的nvm版本过高导致问题

- 版本兼容性：高版本nvm可能与系统或其他软件存在兼容性问题，导致切换版本时出错。

- **解决方法**：卸载nvm后安装1.1.7版本，通常可以解决此类问题。

## 六、总结

通过使用NVM，我们能够轻松地在Vue2和Vue3项目开发中管理和切换Node.js 版本，确保每个项目都能在最佳的环境下运行，避免了因版本不兼容而带来的各种问题。希望本文介绍的内容能够帮助广大开发者更加高效地进行Vue项目开发。在实际使用过程中，如果遇到任何问题，可以参考NVM官方文档或在相关技术论坛上寻求帮助。祝愿大家开发顺利！

## 七、干货文章

【保姆级教程】Vue项目调试技巧：[http://www.guosisoft.com/article/detail/430312211521605](http://www.guosisoft.com/article/detail/430312211521605)

干货|工作中要使用Git，看这篇文章就够了：[http://www.guosisoft.com/article/detail/410508049313861](http://www.guosisoft.com/article/detail/410508049313861)

企业数字化转型如何做？看过来：[http://www.guosisoft.com/article/detail/408745545576517](http://www.guosisoft.com/article/detail/408745545576517)

干货-Vue3 组件通信方式详解：[http://www.guosisoft.com/article/detail/561979982622789](http://www.guosisoft.com/article/detail/561979982622789)

Vue2.x 组件通信方式：[http://www.guosisoft.com/article/detail/411234710110277](http://www.guosisoft.com/article/detail/411234710110277)

【长文】带你搞明白Redis：[http://www.guosisoft.com/article/detail/558799794786373](http://www.guosisoft.com/article/detail/411234710110277)

国思RDIF低代码快速开发平台（支持vue2、vue3）：[http://www.guosisoft.com/article/detail/557095625134149](http://www.guosisoft.com/article/detail/557095625134149)

Vue 前端开发团队风格指南（史上最全）：[http://www.guosisoft.com/article/detail/415491255230533](http://www.guosisoft.com/article/detail/415491255230533)

## 八、结语

如果本文对你有一点点帮助，点个赞支持一下吧，你的每一个【赞】都是我创作的最大动力 _

更多技术文章请往:

http://www.guosisoft.com/article

http://www.rdiframework.net/article

大家一起共同交流和进步呀!!

正文到此结束

所属分类：码农生涯

本文标签： 挨踢业界其他常用工具
版权声明： 本站原创文章，由guosisoft.com发布，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

该篇文章的评论功能暂时被站长关闭

使用nvm管理node版本,方便vue2，vue3开发

热门推荐

相关文章

说给你听

本文目录

文章标签

网站信息

我们的产品

相关链接

关于我们

联系我们