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

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

一、为什么需要使用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 ）下载适合Windows系统的NVM安装包。
   
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 ，等待下载和安装完成。

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

（四）替换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 版本安装均成功。

（六）切换Node版本

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

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

执行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

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

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

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

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

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

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

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

3、配置环境变量

4、全局安装yarn

npm install yarn -g

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

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

查看镜像

yarn config get registry

四、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

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

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

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

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

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

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

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

八、结语

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

更多技术文章请往:

http://www.guosisoft.com/article

http://www.rdiframework.net/article

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