基于windows环境使用nvm安装多版本nodejs

目录

前言

一、卸载node

二、nvm是什么?

三、nvm安装

[1.官网下载 nvm 包](#1.官网下载 nvm 包)

[2. 安装nvm-setup.exe](#2. 安装nvm-setup.exe)

[3. 配置路径和下载镜像](#3. 配置路径和下载镜像)

[4. 检查安装是否完成](#4. 检查安装是否完成)

[四、 使用nvm安装node](#四、 使用nvm安装node)

五、修改npm默认镜像源为淘宝镜像

六、环境变量配置

[1. 新建目录](#1. 新建目录)

[2. 设置环境变量](#2. 设置环境变量)

七、测试安装全局模块

八、测试切换node版本全局模块是否存在


前言

注意: 如果电脑上已经安装了任意node版本,需要将其相关文件及环境变量清理干净后再安装nvm, 保证电脑内没有任何nodejs的残留

一、卸载node

如果已经安装了node,那么在安装nvm之前,需要先卸载node,如果没有安装可以直接跳过这一步到下一步了。
删除前可查当前使用的node版本,方便后续决定使用哪个版本的node。

  • 控制面板 -> 卸载程序 -> 卸载nodejs
    为了确保彻底删除node,看下node安装目录中还有没有node文件夹,有的话一起删除。
    删除以下文件夹(如果存在的话)
  • C:\Program Files (x86)\Nodejs
  • C:\Program Files\Nodejs
  • C:\Users{User}\AppData\Roaming\npm
  • C:\Users{User}\AppData\Roaming\npm-cache
  • 删除C:\Users\用户名 下的 .npmrc文件以及 .yarnrc 文件
  • 环境变量中npm、node的所有相关统统删掉

二、nvm是什么?

nvm(node.js version management),是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具,为了解决node.js 各种版本存在不兼容现象 可以通过它可以安装和切换不同版本的node.js。【可同时在一个环境中安装多个node.js版本(和配套的npm)】


三、nvm安装

1.官网下载 nvm 包

从GitHup上下载 ,Releases · coreybutler/nvm-windows · GitHub 选最新版本进入即可

2. 安装nvm-setup.exe



上面nvm和nodejs默认安装地址都是C盘,我们最好换成其他的盘,我是换成D盘。
并且注意安装路径的文件夹名称不要出现中文,空格等,否则后期npm使用的时候会出现符号格式不正确问题。

3. 配置路径和下载镜像

安装完 nvm 后来配置一下下载源 找到nvm安装路径 -> 找到setting.txt文件 -> 将下面文本覆盖上去

javascript 复制代码
root: D:\nvm
path: D:\nodejs
arch: 64
proxy: none

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

root是 nvm 安装路径 path是 nodejs 路径 node_mirror 是 node 下载镜像 npm_mirror 是 npm 下载镜像

4. 检查安装是否完成

win+R,调用cmd,输入nvm,如下图则表示安装成功,安装成功则如下显示。

可以看到里面列出了各种命令


四、 使用nvm安装node

管理员身份运行终端, 先查询可使用版本号, 终端输入nvm list available, LST代表稳定版本

安装指定node版本

javascript 复制代码
nvm install 20.13.1

安装完成后输入use命令指定使用版本

javascript 复制代码
nvm use 20.13.1

use完成后可以分别输入命令行 node -v 和 npm -v,检验是否安装成功

nvm list 查看已安装nodejs版本, * 号表示正在使用

删除某nodejs版本

javascript 复制代码
nvm uninstall node版本号 //例如:nvm uninstall 16.14.0 即可删除对应版本

五、修改npm默认镜像源为淘宝镜像

javascript 复制代码
npm config set registry https://registry.npmmirror.com/

检查是否设置成功, 应该返回 registry.npmmirror.com/

javascript 复制代码
npm config get registry

六、环境变量配置

1. 新建目录

  1. 为了防止nvm切换node版本之后全局安装的包无法使用,我们直接在nvm目录下创建"node_cache"和"node_global"文件夹

    打开命令行工具, 输入下面两句指令
javascript 复制代码
npm config set prefix "D:\nvm\node_global" npm config set cache "D:\nvm\node_cache"

想查看是否设置成功使用

javascript 复制代码
npm config get prefix 
npm config get cache

2. 设置环境变量

我的电脑右键 -> 属性 -> 高级系统设置 -> 系统属性(高级) -> 环境变量
如果环境变量未正确配置,输入node -v 会报错,系统将无法正确识别"node"命令。
需要我们设置的地方有两个:
系统环境变量 新增NODE_PATH变量 用户变量修改path变量
在[系统环境变量]新建环境变量NODE_PATH值为D:\nvm\node_global\node_modules

修改[用户变量]中的path变量


另外, 在下载完nvm后, 系统环境变量和用户环境变量会默认配置好NVM_HOME和NVM_SYMLINK

点击确定后配置完成


七、测试安装全局模块

在cmd窗口中输入以下指令全局安装http-server模块, 安装成功就表示环境变量配置成功

bash 复制代码
npm install http-server -g

八、测试切换node版本全局模块是否存在

  • 当前node版本运行 http-server
  • 切换版本后重新运行
  • 测试完成,可以看到切换node版本后全局模块依然可以使用
相关推荐
API开发9 天前
苹果芯片macOS安装版Homebrew(亲测) ,一键安装node、python、vscode等,比绿色软件还干净、无污染
vscode·python·docker·nodejs·openssl·brew·homebrew
skyymrj9 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D9 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说10 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说10 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画
sunbyte10 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DrinkWater(喝水记录组件)
前端·javascript·css·vue.js·vue
麦兜*10 天前
【node】Mac m1 安装nvm 和node
java·前端·vue.js·chrome·macos·vue·nvm
胡斌附体10 天前
关于vue.mixin与vue.use的用法分析
vue·区别·mixin·通用·use·生活类比
海的诗篇_11 天前
前端开发面试题总结-vue3框架篇(二)
前端·javascript·vue.js·面试·前端框架·vue
泓博12 天前
npm包冲突install失败
npm·vue