使用nvm管理node.js版本,方便vue2，vue3开发
<p>在Vue项目开发过程中，我们常常会遇到同时维护Vue2和Vue3项目的情况。由于不同版本的Vue对Node.js 版本的要求有所差异，这就使得Node.js 版本管理成为了一个关键问题。NVM（Node Version Manager）作为一款强大的Node.js 版本管理工具，能够帮助我们轻松地在不同版本之间进行切换，极大地提高开发效率。接下来，本文将详细介绍如何使用NVM来管理Node.js 版本，以满足Vue2和Vue3项目的开发需求。</p><p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922673-2138407027.png" alt="nvm" loading="lazy"></p>
<h2 id="一为什么需要使用nvm">一、为什么需要使用NVM</h2>
<p>Vue2和Vue3在技术架构和性能优化上有很大的不同，这导致它们对Node.js 版本的要求也不尽相同。Vue3在很多新特性的实现上依赖于较新的Node.js 版本，而一些Vue2项目可能由于兼容性等原因，更适合在特定的旧版本Node.js 环境下运行。如果没有有效的版本管理工具，每次在不同项目间切换时，都需要卸载并重新安装相应版本的Node.js ，这不仅繁琐，还容易出现环境配置错误等问题。NVM的出现，很好地解决了这一困扰，它允许我们在同一台机器上安装多个Node.js 版本，并能快速切换，确保每个项目都能在合适的Node.js 环境中稳定运行。</p>
<h2 id="二使用nvm切换node版本的步骤">二、使用NVM切换Node版本的步骤</h2>
<h3 id="一完全删除之前的node及npm">（一）完全删除之前的Node及npm</h3>
<p>在安装NVM并切换Node版本之前，需要先将之前安装的Node及npm彻底清理干净，包括应用程序、缓存文件以及环境变量。具体操作如下：</p>
<ol>
<li><strong>清除npm缓存</strong>：打开cmd命令窗口，输入 <code>npm cache clean --force</code> 并回车执行，以清除npm缓存。</li>
<li><strong>卸载Node.js 应用程序</strong>：打开“程序与功能”卸载界面，找到“node.js ”，点击卸载。</li>
<li><strong>删除相关环境变量</strong>：打开环境变量设置窗口，检查并删除所有与Node相关的环境变量。卸载完成后，可以在命令行中输入 <code>npm -v</code> 和 <code>node -v</code> 查看是否还有残留版本信息，之后最好重启一下电脑，确保卸载彻底。</li>
</ol>
<h3 id="二安装nvm">（二）安装NVM</h3>
<ol>
<li>
<p><strong>下载安装包</strong>：从官网（https://github.com/coreybutler/nvm-windows/releases ）下载适合Windows系统的NVM安装包。</p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922746-1928205938.png" alt="nvm安装包" loading="lazy"></p>
</li>
<li>
<p><strong>以管理员身份安装</strong>：下载完成后，右键点击安装包，选择“以管理员身份打开”，然后按照安装向导的提示进行安装。在安装过程中，需要选择NVM的安装路径以及Node.js 的安装路径，用户可以根据自己的需求进行选择。指定一个默认的安装位置 (D:\nvm\nvm-install) 和nodejs的位置 (D:\nvm\nodejs)，这个路径上下文要统一。</p>
</li>
</ol>
<h3 id="三安装nodejs-版本">（三）安装Node.js 版本</h3>
<ol>
<li>
<p><strong>查看可用版本</strong>：安装完成NVM后，以管理员身份打开cmd命令窗口，输入 <code>nvm list available</code> 命令，查看当前可下载的Node.js 版本列表。一般建议安装LTS（长期支持）版本，以确保稳定性。</p>
</li>
<li>
<p><strong>安装指定版本</strong>：根据项目需求，选择需要安装的Node.js 版本进行下载安装。例如，咱们的项目若要安装针对vue2的Node.js 16.13.1和针对vue3的node.js 18.14.2版本，在命令行中分别输入 <code>nvm install 16.13.1</code> 和 <code>nvm install 18.14.2</code> ，等待下载和安装完成。</p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922772-1399142236.png" alt="nvm install 16.13.1" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922698-360822286.png" alt="nvm install 18.14.2" loading="lazy"></p>
<p>在我们对应的目录下已经安装了对应版本的node.js，如下图所示。</p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922823-1669114465.png" alt="node版本" loading="lazy"></p>
</li>
</ol>
<h3 id="四替换nvm自动下载的node包可选">（四）替换NVM自动下载的Node包（可选）</h3>
<p>由于NVM自动下载的Node包可能存在问题，我们可以到Node.js 的官网上将相应版本的Node包下载下来，替换掉NVM目录下的对应版本的Node包。Node.js 官方下载地址：https://nodejs.org/zh-cn/download/releases/ 。</p>
<h3 id="五检查安装是否成功">（五）检查安装是否成功</h3>
<p>安装完成后，重启电脑，再次以管理员身份打开cmd命令窗口，输入 <code>nvm list</code> 命令。如果出现之前安装的Node.js 版本列表，则说明NVM安装及Node.js 版本安装均成功。</p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922797-277122630.png" alt="nvm list" loading="lazy"></p>
<h3 id="六切换node版本">（六）切换Node版本</h3>
<p>在不同的Vue项目开发中，根据项目对Node.js 版本的要求，使用以下命令进行版本切换：<code>nvm use </code>，例如，若要切换到Node.js 18.14.2版本，在命令行中输入 <code>nvm use 18.14.2</code> 即可。如果切换过程中出现乱码问题，可以尝试再次以管理员身份打开cmd命令窗口，重新执行切换命令。</p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922850-1506259063.png" alt="nvm use 18.14.2" loading="lazy"></p>
<p>我们再执行<code>nvm list</code>，可以看到前面带*的就是当前正在使用的node版本。</p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922875-747089867.png" alt="nvm list" loading="lazy"></p>
<p>执行<code>npm config set registry https://registry.npmmirror.com </code> 使用这个命令安装镜像源。</p>
<p>此时使用vue命令会提示找不到此命令，使用 <code>npm install -g @vue/cli </code>命令安装vue命令。</p>
<p>这一步很重要：在系统变量的 Path 中配置环境变量 <code>D:\nvm\nodejs\node_global</code>，不然会提示找不到node命令</p>
<h3 id="七nvm切换国内镜像">（七）nvm切换国内镜像</h3>
<p>如果下载node过慢或者安装失败，请更换国内镜像源, 在 nvm 的安装路径下，找到 settings.txt，设置node_mirro与npm_mirror为国内镜像地址。下载就飞快了<br>
<code>nvm npm_mirror https://npmmirror.com/mirrors/npm/</code><br>
<code>nvm node_mirror https://npmmirror.com/mirrors/node/</code><br>
<code>或者：</code><br>
<code>node_mirror: https://npm.taobao.org/mirrors/node/</code><br>
<code>npm_mirror: https://npm.taobao.org/mirrors/npm/</code></p>
<p><strong>命令行切换(注意：请切换国内镜像后再安装node版本，否则会很慢)</strong></p>
<h5 id="阿里云镜像">阿里云镜像</h5>
<pre><code>nvm npm_mirror https://npmmirror.com/mirrors/npm/
nvm node_mirror https://npmmirror.com/mirrors/node/
</code></pre>
<h5 id="腾讯云镜像">腾讯云镜像</h5>
<pre><code>nvm npm_mirror http://mirrors.cloud.tencent.com/npm/
nvm node_mirror http://mirrors.cloud.tencent.com/nodejs-release/
</code></pre>
<p>打开链接查看可以node版本：https://registry.npmmirror.com/binary.html?path=node/</p>
<p>nvm默认安装后，还可以通过修改他的配置文件，来配置nvm下载node和npm的下载路径。</p>
<p>打开nvm的安装目录，双击settings.txt</p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922903-1789985738.png" alt="setting.txt" loading="lazy"></p>
<p>添加如下路径后保存（指定如下路径，下载node和npm时会更快）</p>
<pre><code class="language-c#">node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922928-396103552.png" alt="配置文件" loading="lazy"></p>
<h2 id="三配置全局安装的模块路径和缓存路径">三、配置全局安装的模块路径和缓存路径</h2>
<h3 id="1在nvm的安装目录下创建如下空目录">1、在nvm的安装目录下创建如下空目录</h3>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922981-192381001.png" alt="node_cache、node_global" loading="lazy"></p>
<h3 id="2创建完两个文件夹后在cmd窗口中输入以下命令">2、创建完两个文件夹后，在cmd窗口中输入以下命令</h3>
<p>双引号中的路径是上一步中创建的两个文件夹的路径</p>
<pre><code>npm config set prefix "D:\nvm\nvm-install\node_global"
npm config set cache "D:\nvm\nvm-install\node_cache"
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922961-36720124.png" alt="image-20250217150630788" loading="lazy"></p>
<h3 id="3配置环境变量">3、配置环境变量</h3>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922955-1270807991.png" alt="用户环境变量" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922980-759435180.png" alt="系统环境变量" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922979-1134873287.png" alt="新建一个NODE_PATH的系统环境变量" loading="lazy"></p>
<h3 id="4全局安装yarn">4、全局安装yarn</h3>
<pre><code>npm install yarn -g
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922963-669459368.png" alt="安装yarn" loading="lazy"></p>
<p>给yarn设置淘宝镜像，刚安装yarn，执行下面命令会报错，可以重新打开命令行窗口执行。</p>
<pre><code>yarn config set registry http://registry.npm.taobao.org/
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922965-1453078171.png" alt="给yarn设置淘宝镜像" loading="lazy"></p>
<p>查看镜像</p>
<pre><code>yarn config get registry
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/157572/202502/157572-20250218101922965-1556097095.png" alt="查看yarn镜像" loading="lazy"></p>
<h2 id="四nvm常用命令总结">四、NVM常用命令总结</h2>
<ul>
<li><strong><code>nvm list </code></strong>：列出已经安装的Node.js 版本；添加 <code>available</code> 参数，可显示可下载版本的部分列表，此命令也可简写为 <code>nvm ls </code>。</li>
<li><strong><code>nvm install </code></strong>：安装指定版本的Node.js ，<code></code> 可选参数用于指定安装32位或64位版本（默认为系统当前架构）。在命令后面添加 <code>–insecure</code>，可以绕过远端下载服务器的SSL验证。</li>
<li><strong><code>nvm uninstall </code></strong>：卸载指定版本的Node.js 。</li>
<li><strong><code>nvm use </code></strong>：切换到使用指定的Node.js 版本，同样可指定32/64位 <code></code>。</li>
<li><strong><code>nvm on</code></strong>：启用Node.js 版本管理。</li>
<li><strong><code>nvm off</code></strong>：禁用Node.js 版本管理（不卸载任何东西）。</li>
<li><strong><code>nvm proxy </code></strong>：设置用于下载的代理。留 <code></code> 空白，可查看当前的代理；设置 <code></code> 为 <code>none</code> 则删除代理。</li>
<li><strong><code>nvm node_mirror </code></strong>：设置Node镜像，默认为https://nodejs.org/dist/ ，也可以设置为淘宝的镜像https://npm.taobao.org/mirrors/node/ 。</li>
<li><strong><code>nvm npm_mirror </code></strong>：设置npm镜像，默认为https://github.com/npm/npm/archive/ ，也可以设置为淘宝的镜像https://npm.taobao.org/mirrors/npm/ 。</li>
<li><strong><code>nvm version</code></strong>：显示当前运行的NVM版本，可简写为 <code>nvm v</code>。</li>
</ul>
<h2 id="五nvm切换node版本常见问题">五、NVM切换Node版本常见问题</h2>
<p>在使用NVM切换Node版本时，常见的问题及解决方法如下：</p>
<h3 id="一切换版本后乱码">（一）切换版本后乱码</h3>
<ul>
<li>
<p>权限不足：这是最常见的导致乱码的原因。</p>
<ul>
<li><strong>解决方法</strong>：找到命令提示符（即cmd），右键点击“更多”，选择“以管理员身份运行”，然后再使用 <code>nvm use</code> 命令来切换版本。也可以右键点击开始菜单按钮，选择“Windows PowerShell(管理员)”，在其中执行 <code>nvm use </code> 命令。</li>
</ul>
</li>
<li>
<p>路径问题：nvm安装路径包含中文或空格，可能会导致乱码问题。</p>
<ul>
<li><strong>解决方法</strong>：首先从系统中卸载干净node和nvm，然后重新安装nvm，安装路径和node路径不能带有中文和空格，建议在C盘下新建文件夹，并将nvm和node都安装在其中，重新安装后即可解决。同时，还需检查 <code>setting.txt</code> 文件里面的路径是否与实际安装路径一致。</li>
</ul>
</li>
</ul>
<h3 id="二切换版本无效">（二）切换版本无效</h3>
<ul>
<li>
<p>未正确安装nvm或nodejs：nvm或nodejs安装过程中出现问题，可能导致版本切换无效。</p>
<ul>
<li><strong>解决方法</strong>：卸载nvm和nodejs后，重新进行安装，安装时确保按照正确步骤操作。</li>
</ul>
</li>
<li>
<p>环境变量配置不正确：环境变量配置错误，nvm无法正确识别和切换版本。</p>
<ul>
<li><strong>解决方法</strong>：打开设置系统，进入“系统信息”，点击“高级系统设置”，选择“环境变量”，检查用户变量和系统变量中与nvm和nodejs相关的环境变量配置是否正确。新建变量 <code>NVM_HOME</code>，值设为nvm的安装路径；新建变量 <code>NVM_SYMLINK</code>，值设为nvm安装路径下的 <code>nodejs</code> 文件夹路径。</li>
</ul>
</li>
<li>
<p>之前安装的node版本影响：之前安装的node版本可能干扰了nvm的切换。</p>
<ul>
<li><strong>解决方法</strong>：找到之前安装的node版本所在的文件夹并删除，然后使用 <code>nvm install [目标版本号]</code> 重新安装目标版本，再使用 <code>nvm use [目标版本号]</code> 进行切换。</li>
</ul>
</li>
</ul>
<h3 id="三npm没有指令">（三）npm没有指令</h3>
<ul>
<li>
<p>环境变量问题：环境变量配置不正确，可能导致系统无法找到npm指令。</p>
<ul>
<li><strong>解决方法</strong>：检查环境变量中与npm相关的路径是否正确配置。一般来说，需要将npm的安装路径添加到系统的 <code>Path</code> 环境变量中。</li>
</ul>
</li>
<li>
<p>nvm与npm的关联问题：nvm与npm之间的关联出现问题，导致npm指令无法正常使用。</p>
<ul>
<li><strong>解决方法</strong>：将 <code>用户名/AppData/Roaming/nvm/nodejs/node_modules/npm/bin</code> 路径下的 <code>npm</code> 和 <code>npm.cmd</code> 两个文件拷贝到需要的对应node版本的根目录下。</li>
</ul>
</li>
</ul>
<h3 id="四安装特定版本nodejs-失败">（四）安装特定版本Node.js 失败</h3>
<ul>
<li>
<p>网络问题：网络不稳定或下载源问题可能导致安装失败。</p>
<ul>
<li><strong>解决方法</strong>：检查网络连接是否正常，尝试更换下载源。可以设置NVM的镜像源，例如将 <code>nvm node_mirror</code> 设置为淘宝的镜像 <code>https://npm.taobao.org/mirrors/node/</code> ，将 <code>nvm npm_mirror</code> 设置为 <code>https://npm.taobao.org/mirrors/npm/</code> 。</li>
</ul>
</li>
<li>
<p>权限问题：安装过程中权限不足，可能导致无法写入文件。</p>
<ul>
<li><strong>解决方法</strong>：以管理员身份运行安装命令或安装程序。</li>
</ul>
</li>
</ul>
<h3 id="五安装的nvm版本过高导致问题">（五）安装的nvm版本过高导致问题</h3>
<ul>
<li>
<p>版本兼容性：高版本nvm可能与系统或其他软件存在兼容性问题，导致切换版本时出错。</p>
<ul>
<li><strong>解决方法</strong>：卸载nvm后安装1.1.7版本，通常可以解决此类问题。</li>
</ul>
</li>
</ul>
<h2 id="六总结">六、总结</h2>
<p>通过使用NVM，我们能够轻松地在Vue2和Vue3项目开发中管理和切换Node.js 版本，确保每个项目都能在最佳的环境下运行，避免了因版本不兼容而带来的各种问题。希望本文介绍的内容能够帮助广大开发者更加高效地进行Vue项目开发。在实际使用过程中，如果遇到任何问题，可以参考NVM官方文档或在相关技术论坛上寻求帮助。祝愿大家开发顺利！</p>
<h2 id="七干货文章">七、干货文章</h2>
<p>【保姆级教程】Vue项目调试技巧：http://www.guosisoft.com/article/detail/430312211521605</p>
<p>干货|工作中要使用Git，看这篇文章就够了：http://www.guosisoft.com/article/detail/410508049313861</p>
<p>企业数字化转型如何做？看过来：http://www.guosisoft.com/article/detail/408745545576517</p>
<p>干货-Vue3 组件通信方式详解：http://www.guosisoft.com/article/detail/561979982622789</p>
<p>Vue2.x 组件通信方式：http://www.guosisoft.com/article/detail/411234710110277</p>
<p>【长文】带你搞明白Redis：http://www.guosisoft.com/article/detail/558799794786373</p>
<p>国思RDIF低代码快速开发平台（支持vue2、vue3）：http://www.guosisoft.com/article/detail/557095625134149</p>
<p>Vue 前端开发团队风格指南（史上最全）：http://www.guosisoft.com/article/detail/415491255230533</p>
<h2 id="八结语">八、结语</h2>
<p>如果本文对你有一点点帮助，点个赞支持一下吧，你的每一个【赞】都是我创作的最大动力 _</p>
<p>更多技术文章请往:</p>
<p>http://www.guosisoft.com/article</p>
<p>http://www.rdiframework.net/article</p>
<p>大家一起共同交流和进步呀!!</p>
</div>
<div id="MySignature" role="contentinfo">
<span style="font-size:10pt;">
</span>
<p>
<br />
</p>
<p style="background-color:#f8f8ee;font-family:微软雅黑;font-size:12px;" id="mySignature">
<span style="font-size:10pt;">作者：</span>
<strong>
<span style="color:red;font-size:12px;">
<span>
<span style="font-size:10pt;">RDIF</span>
</span>
</span>
</strong>
<br />
<span style="font-size:10pt;">出处：</span>
<span style="font-size:10pt;">http://www.cnblogs.com/huyong/</span>
<br />
<span style="font-size:10pt;">Email：</span>
<span style="font-size:10pt;">406590790@qq.com</span>
<br />
<span style="font-size:10pt;">QQ：</span>
<span style="font-size:10pt;">406590790</span>
<br />
<span style="font-size:10pt;">微信：</span>
<span style="font-size:10pt;">13005007127(同手机号)</span>
<br />
<span style="font-size:10pt;">框架官网：</span>
<span style="font-size:10pt;">http://www.guosisoft.com/</span>
<span style="font-size:10pt;">http://www.rdiframework.net/</span>
<br />
<span style="font-size:10pt;">框架其他博客：</span>
<span style="font-size:10pt;">http://blog.csdn.net/chinahuyong</span>
<br />
<span style="font-size:10pt;">http://www.cnblogs.com/huyong</span>
<br />
<span style="font-size:10pt;">国思RDIF开发框架</span>
，
<span style="font-size:10pt;color:#FFFFFF;background-color:#009900;">给用户和开发者最佳的.Net框架平台方案，为企业快速构建跨平台、企业级的应用提供强大支持。</span>
<br />
<span style="font-size:10pt;">关于作者：系统架构师、信息系统项目管理师、DBA。专注于微软平台项目架构、管理和企业解决方案，多年项目开发与管理经验，曾多次组织并开发多个大型项目，在面向对象、面向服务以及数据库领域有一定的造诣。现主要从事基于</span>
<span style="font-size:10pt;">RDIF</span>
<span style="font-size:10pt;">框架的技术开发、咨询工作，主要服务于金融、医疗卫生、铁路、电信、物流、物联网、制造、零售等行业。</span>
<br />
<span style="font-size:10pt;">如有问题或建议，请多多赐教！</span>
<br />
<span style="font-size:10pt;">本文版权归作者和CNBLOGS博客共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过微信、邮箱、QQ等联系我，非常感谢。</span>
</p><br><br>
来源：https://www.cnblogs.com/huyong/p/18721386
頁:
[1]