nvm详解及使用中的坑

为什么使用nvm

   当我们使用vue的时候，必然躲不了的是node（当然使用原生vue.js的不用），假设是多人开发一个项目的情况下，你电脑本身安装的node版本是16，而其他人使用的node版本是14，这种情况下如果你直接使用你的16版本的node编译，运气好的话是可以编译成功的，如果其中的依赖复杂，那估摸着就会出现报错。
   然后你各种排错（满头大汗的那种），最终发现，嘿，没用，就算你运气好找出了错误，那么恭喜你，你很强，但还是没用，为什么，因为有的版本的插件是依赖node版本的，你如果贸然升级插件去兼容你的电脑，那服务器上的就会出问题，最终只能走向切换node版本的路子了。（别问我怎么知道的，问就是折腾了一天，主打一手不装南墙不回头）
   这时候nvm就体现出它的作用了，nvm，一个可以自由切换node版本的工具。

nvm简介

   nvm全英文也叫node.js version management，是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。（这段是官网介绍）

如想要了解更多细节，可访问 https://gitcode.gitcode.host/docs-cn/nvm-docs-cn/ （非常详细，不建议初学者查看）

nvm安装

https://nvm.uihtm.com/
也可以直接点这里进入：链接nvm官网教程

   nvm的安装大家可以去搜一下其它博主，有很详细的教程（包含Linux和Mac环境），上面是官网提供的教程，可能不太适合已经安装过node和vue的伙伴，这篇主要就是解决安装nvm后使用的一些问题。

可能遇到的情况和问题

1. 查看node版本时发现还是之前安装的node版本（或者报错）

情况一：没有卸载干净之前的node

   注意：安装nvm前，一定要卸载干净之前的node版本，推荐使用任务管理器直接卸载，怎么检查是否卸载干净，首先找到你之前安装node的地方，如果没有指定到除C盘外的其他地方，那安装位置就在C:\Program Files\下（具体是node还是nodejs我忘记了，因为现在使用的nvm那里是nodejs），如果还有node的文件夹直接干掉，如果提示正在使用，那应该就是你有vue项目没有停止，停止了就可以，如果还不行，要么直接在任务管理器杀掉node的进程，或者重启（推荐重启电脑）。
   出现这种情况可能就是你没有卸载干净之前的node版本，或者说没有删除环境变量，这时候系统还是会根据你之前的配置读取node的版本，

情况二：没有删除对应的环境变量

   大多数人在删除node后，没有删除node环境变量的习惯，要知道，cmd命令实际就是根据你的环境变量配置去找对应的文件夹的，所以一定要在卸载完node后删除node的环境变量。

设置-> 系统 -> 系统信息 -> 高级系统设置 -> 环境变量  (将用户和系统变量都删除掉)

检查是否卸载成功node

如果卸载成功，会出现上面node不是内部或外部命令的提示。

2. 提示vue不是内部命令

出现这种情况有几种前提

一、之前没有安装过vue和vue-cli

   如果之前没有安装过vue，大家肯定首先想到的是安装，如果贸然安装和配置环境变量，那可能就会有坑了。
   注意下面命令的区别

npm install -g vue     npm install -g @vue/cli

npm install vue   npm install @vue/cli

   第一行命令是全局安装，原理是会自动寻找node_global文件夹，并安装在里面
   第二行命令是默认的，系统会安装到你doc命令窗口的路径下（C:User/xxx）xxx是你的用户名

• 坑1
     使用npm install -g vue安装vue，npm install -g @vue/cli安装脚手架，这时候系统会安装到C:\Users\31655\AppData\Roaming\nvm\node_global下面，（如果你的nvm安装在C盘的话，建议还是装在C盘，不然会有很多不必要的问题），这是nvm安装后会配置node_global文件夹，那这时候配置环境变量的话就是上面那个路径（31655是我电脑的名称，不要搞混了），直接在系统变量path中添加即可。
  

   配置好环境变量后，一定要关闭此dos窗口，一定要，不然就算你配置正确，系统没有反应过来，就会给你一个错觉，这个非常坑。

   这就是安装成功的版本号
   这里又有两个坑了哈哈哈

1. vue -V查看的是脚手架的版本，不是vue的版本，如果要查看vue版本可以使用npm list vue
2. 如果继续在此窗口使用npm list vue命令的话，最终会展示空

   为什么这里会显示配置为空呢？已经安装并成功配置了vue和脚手架了。
   Attention！！！
   npm命令是会根据你dos窗口的命令走的，这里我是直接win+R启动的cmd，默认是用户文件夹下面，如果你使用上面的第二行命令（不是全局安装）的话，就会安装到C:User/31655下面，你就可以查看到对应的配置，如何验证呢？请看下图。

   但是如果我切换到安装vue的那个目录（全局安装），就可以看到下面的配置。

   这里出现了extraneous标识，官方话说就是多余的，其实这也是nvm的一个弊端，虽然可以自由切换node版本，但无法动态的切换vue的版本，这对于使用脚手架4.5之前的开发者不太友好。

转载：https://juejin.cn/post/7096798713628065800

(1)vue-cli3之前，也就是vue-cli2只能利用vue init webpack app命令初始化vue2.x的项目，
(2)vue-cli3~vue-cli4.5之间时,可以利用vue create app初始化vue2.x的项目，不能初始化vue3.x，因为vue-cli脚手架版本4.5以上对应的才是vue3
(3)vue-cli4.5以上时，可以利用vue create app初始化vue2.x或者也vue3.x的项目，两者都可以在初始化时，自行选择

   虽然不严谨，但是好使，这样做你可以在一个电脑同时存在多个版本的脚手架（因为有可能会出现某个低版本的插件不兼容高版本的脚手架，虽然很少，但确实存在）。

   使用npm install vue安装vue，npm install @vue/cli安装脚手架的话，安装位置就是我上面提到的，会在系统路径下：C:User/31655类似的，只需要正确配置环境变量，可以正常使用，唯一和上面不同的是，这种安装方式不受nvm的影响，就算之后卸载了nvm，这里也不用改变，只需要安装一个node就行。而且使用npm list vue命令会正常显示配置信息。

二. 之前安装过vue和vue-cli

   在这种情况下，正常情况下不会出现什么问题，唯一需要注意的就是使用nvm安装node的时候，尽量和之前的node版本一致，如果出现上面的情况，检查对应的环境变量或者卸载重新安装即可。

3. 无故出现npm报错或者依赖下载失败的情况

   这里需要注意的是，如果确认自己的操作没有问题，那就要查看你使用的node版本和npm版本了，因为在之前公司有很多个vue项目，不同的项目使用的node和npm版本都不一样，我就出现过用node的16版本和npm的10版本下载依赖始终报错，最后切换到14的node和npm才正常下载的依赖，所以不要出错就质疑自己写的代码，环境问题也不能忽视。

nvm如何工作以及目录结构介绍

目录结构

• node_cache 是缓存文件夹，一般我们不使用nvm也会在node文件夹中配置
• node_global是全局包，下载的依赖一般都在这里，和node一样
• 这两下面一般都是下载的node版本（一般使用nvm下载的node会有问题，可以先使用nvm下载，之后在node官网下载对应版本的node，在这里进行替换）
• 最后一个是卸载nvm的脚本文件

工作原理（个人理解，经过验证后得出）

   在探索过程中有一个疑问一直在困扰我，为什么nvm不用配置node的环境变量，一般必须是需要配置环境变量node才可以正常使用的，经过实验发现，当你使用nvm use xxxxxx切换node的时候，一个文件夹下面的东西是会改变的。

   每当切换node版本，其实变化的是这个文件夹下面的内容，也就是说，node实际的工作位置还是在这里，因为nvm是配置了环境变量的，所以底层应该是实现了node的环境变量切换。

   这是我目前使用的npm版本，对应的node是16（没有对npm升级，使用的原生npm版本），当我切换到node14发现，这里的文件就变化成了npm版本为6.14.13，其实就是你在nvm下安装node的npm版本，只是迁移到了这里进行使用，这里也有一个小坑，就是升级npm版本，如果直接升级npm，可能会存在你升级的不是你nvm下面的npm版本，有时候会在你系统目录下，也就是C:User/31655下存在一个node_modules的包，那里有一个npm，或者在C:\Users\31655\AppData\Roaming下有npm包，大家有时候会搞混，我就搞混过一次，如果出现不要怕，这都是之前你安装过遗留下的包，可以根据文件的修改时间判断，如果不是你近期操作的，可以直接干掉文件夹，免得混淆，为了避免升级npm出现问题，我一般都是在nvm安装node文件夹下进行升级。

   如果细心的小伙伴会发现，这些文件夹的构成实际都是一个一个前端项目，里面都有node_modules、package.json等这些文件，如果你不想使用命令升级，在官网找到对应版本的npm包下载下来，直接替换文件夹也行。

好了，这就是这次所分享的内容，也是在工作中遇到的一些问题，有些东西也是我自己理解和查询资料以及验证所得，如果有错误，希望各位大佬指正。