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

dlJGu7ee

在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彻底清理干净，包括应用程序、缓存文件以及环境变量。具体操作如下：

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

（二）安装NVM

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

（三）安装Node.js 版本

• 查看可用版本：安装完成NVM后，以管理员身份打开cmd命令窗口，输入 nvm list available 命令，查看当前可下载的Node.js 版本列表。一般建议安装LTS（长期支持）版本，以确保稳定性。
  
• 安装指定版本：根据项目需求，选择需要安装的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 https://nodejs.org/dist/ ，也� ... /mirrors/node/ 。
  
  干货|工作中要使用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
  大家一起共同交流和进步呀!!