使用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

一、为什么需要使用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 -vnode -v 查看是否还有残留版本信息,之后最好重启一下电脑,确保卸载彻底。

(二)安装NVM

  1. 下载安装包:从官网(https://github.com/coreybutler/nvm-windows/releases )下载适合Windows系统的NVM安装包。
    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.1nvm install 18.14.2 ,等待下载和安装完成。

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

(四)替换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

(六)切换Node版本

在不同的Vue项目开发中,根据项目对Node.js 版本的要求,使用以下命令进行版本切换:nvm use [version],例如,若要切换到Node.js 18.14.2版本,在命令行中输入 nvm use 18.14.2 即可。如果切换过程中出现乱码问题,可以尝试再次以管理员身份打开cmd命令窗口,重新执行切换命令。
nvm use 18.14.2
我们再执行nvm list,可以看到前面带*的就是当前正在使用的node版本。
nvm list
执行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
添加如下路径后保存(指定如下路径,下载node和npm时会更快)

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

配置文件

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

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

node_cache、node_global

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

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

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

image-20250217150630788

3、配置环境变量

用户环境变量
系统环境变量
新建一个NODE_PATH的系统环境变量

4、全局安装yarn

npm install yarn -g

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

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

给yarn设置淘宝镜像
查看镜像

yarn config get registry

查看yarn镜像

四、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 路径下的 npmnpm.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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/972074.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java8适配的markdown转换html工具(FlexMark)

坐标地址&#xff1a; <dependency><groupId>com.vladsch.flexmark</groupId><artifactId>flexmark-all</artifactId><version>0.60.0</version> </dependency> 工具类代码&#xff1a; import com.vladsch.flexmark.ext.tab…

Qt开发①Qt的概念+发展+优点+应用+使用

目录 1. Qt的概念和发展 1.1 Qt的概念 1.2 Qt 的发展史&#xff1a; 1.3 Qt 的版本 2. Qt 的优点和应用 2.1 Qt 的优点&#xff1a; 2.2 Qt 的应用场景 2.3 Qt 的应用案例 3. 搭建 Qt 开发环境 3.1 Qt 的开发工具 3.2 Qt SDK 的下载和安装 3.3 Qt 环境变量配置和使…

vscode插件开发

准备 安装开发依赖 npm install -g yo generator-code 安装后&#xff0c;运行命令 yo code 运行 打开项目&#xff0c; 点击 vscode 调式 按 F5 或点击调试运行按钮 会打开一个新窗口&#xff0c;在新窗口按快捷键 CtrlShiftP &#xff0c;搜索 Hello World 选择执行 右下角出…

自制简单的图片查看器(python)

图片格式&#xff1a;支持常见的图片格式&#xff08;JPG、PNG、BMP、GIF&#xff09;。 import os import tkinter as tk from tkinter import filedialog, messagebox from PIL import Image, ImageTkclass ImageViewer:def __init__(self, root):self.root rootself.root.…

嵌入式 lwip http server makefsdata

背景&#xff1a; 基于君正X2000 MCU Freertoslwip架构 实现HTTP server服务&#xff0c;MCU作为HTTP服务器通过网口进行数据包的传输&#xff0c;提供网页服务。其中设计到LWIP提供的工具makefsdata&#xff0c;常用于将文件或目录结构转换为适合嵌入到固件中的二进制格式。 …

架构设计系列(三):架构模式

一、概述 关于移动应用开发中常见的架构模式&#xff0c;这些模式是为了克服早期模式的局限性而引入。常见的 架构模式有&#xff1a; MVC, MVP, MVVM, MVVM-C, and VIPER 二、MVC, MVP, MVVM, MVVM-C, and VIPER架构模式 MVC、MVP、MVVM、MVVM-C 和 VIPER 是移动应用开发中…

CSS盒模

CSS盒模型就像一个快递包裹&#xff0c;网页上的每个元素都可以看成是这样一个包裹&#xff0c;它主要由以下几个部分组成&#xff1a; 内容&#xff08;content&#xff09;&#xff1a;就像包裹里真正装的东西&#xff0c;比如文字、图片等。在CSS里&#xff0c;可用width&a…

解决DeepSeek服务器繁忙的有效方法

全球42%的企业遭遇过AI工具服务器过载导致内容生产中断&#xff08;数据来源&#xff1a;Gartner 2025&#xff09;。当竞品在凌晨3点自动发布「智能家居安装指南」时&#xff0c;你的团队可能正因DeepSeek服务器繁忙错失「净水器保养教程」的流量黄金期⏳。147SEO智能调度系统…

Zookeeper 和 Redis 哪种更好?

目录 前言 &#xff1a; 什么是Zookeeper 和 Redis &#xff1f; 1. 核心定位与功能 2. 关键差异点 (1) 一致性模型 (2) 性能 (3) 数据容量 (4) 高可用性 3. 适用场景 使用 Zookeeper 的场景 使用 Redis 的场景 4. 替代方案 5. 如何选择&#xff1f; 6. 常见误区 7. 总结 前言…

动态规划从入坟走向入坑

目录 1.动态规划的含义 2.动态规划的解题步骤(动规五部曲) 3.动态规划的题型 4.相关思路 1.动规基础(由于我看的博主讲的动规很简单,所以这里就不讲了) 2.背包问题 1.二维dp数组01背包 1.dp[i][j] 表示从下标为[0-i]的物品里任意取&#xff0c;放进容量为j的背包&#xf…

Golang学习笔记_34——组合模式

Golang学习笔记_31——原型模式 Golang学习笔记_32——适配器模式 Golang学习笔记_33——桥接模式 文章目录 一、核心概念1. 定义2. 解决的问题3. 核心角色4. 类图 二、特点分析三、适用场景1. 文件系统2. 图形界面3. 组织架构 四、代码示例&#xff08;Go语言&#xff09;五、…

vue+elementplus创建初始化安装

项目创建初始化 D:\Tool\mysql\education_vue 这个路径下cmd 或打开vscode&#xff0c;把项目丢进code中打开 安装element plus Container 布局容器 | Element Plus npm install element-plus --save 把项目初始文件Homeview AboutView删了&#xff0c;Router index.js中删一…

SQL 优化工具使用之 explain 详解

一、导读 对于大部分开发人员来说&#xff0c;平常接触的无非就是增删改查这些基本操作&#xff0c;创建存储过程&#xff0c;视图等等都是 DBA 该干的活&#xff0c;但是想要把这些基本操作写的近乎完美也是一件难事。 而 explain 显示了 MySQL 如何使用索引来处理 select 语…

仿 Sora 之形,借物理模拟之技绘视频之彩

来自麻省理工学院、斯坦福大学、哥伦比亚大学以及康奈尔大学的研究人员携手开源了一款创新的3D交互视频模型——PhysDreamer&#xff08;以下简称“PD”&#xff09;。PD与OpenAI旗下的Sora相似&#xff0c;能够借助物理模拟技术来生成视频&#xff0c;这意味着PD所生成的视频蕴…

Python的顺序结构和循环结构

文章目录 一、条件语句&#xff08;1&#xff09;条件语句的定义&#xff08;2&#xff09;条件语句的语法&#xff08;a&#xff09;单分支 if&#xff08;b&#xff09;双分支 if-else&#xff08;c&#xff09;多分支 if-elif-elif-...-else &#xff08;3&#xff09;注意事…

04 redis数据类型

文章目录 redis数据类型string类型hash类型list类型set类型zset类型 &#xff08;sortedset&#xff09;通用命令 redis数据类型 官方命令&#xff1a;&#xff1a;http://www.redis.cn/commands.html Redis 中存储数据是通过 key-value 格式存储数据的&#xff0c;其中 val…

AutoGen:玩转多智能体团队协作 (Teams)

&#x1f449;&#x1f449;&#x1f449;本人承接各类AI相关应用开发项目(包括但不限于大模型微调、RAG、AI智能体、NLP、机器学习算法、运筹优化算法、数据分析EDA等) !!!&#x1f449;&#x1f449;&#x1f449; 有意愿请私信!!! AutoGen 的 AgentChat 模块为我们提供了强大…

Python PyCharm DeepSeek接入

Python PyCharm DeepSeek接入 创建API key 首先进入DeepSeek官网&#xff0c;https://www.deepseek.com/ 点击左侧“API Keys”&#xff0c;创建API key&#xff0c;输出名称为“AI” 点击“创建"&#xff0c;将API key保存&#xff0c;复制在其它地方。 在PyCharm中下…

分享8款AI生成PPT的工具!含测评

随着人工智能技术的飞速进步&#xff0c;制作PPT变得愈发便捷&#xff0c;仅需输入主题指令&#xff0c;便能在瞬间获得一份完整的演示文稿。尤其在制作篇幅较长的PPT时&#xff0c;手动编写每一页内容并设计格式和排版&#xff0c;不仅效率低下&#xff0c;而且耗时耗力。 本…

50页PDF|数字化转型成熟度模型与评估(附下载)

一、前言 这份报告依据GBT 43439-2023标准&#xff0c;详细介绍了数字化转型的成熟度模型和评估方法。报告将成熟度分为五个等级&#xff0c;从一级的基础转型意识&#xff0c;到五级的基于数据的生态价值构建与创新&#xff0c;涵盖了组织、技术、数据、资源、数字化运营等多…