VUE开发之nvm安装、管理node多版本以及配置环境变量【保姆级教程】

最新推荐文章于 2025-10-08 21:34:37 发布

原创最新推荐文章于 2025-10-08 21:34:37 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

文章标签：

引言
在做VUE前端开发时，不同的项目运行时可能需要不同的node版本才可以运行，由于来回进行卸载不同版本的node比较麻烦；所以需要使用node工程多版本管理。
本人在配置时，通过网络搜索教程，由于文章时间过老，或者文章的互相拷贝导致配置时出现许多小问题，但最后也是配置成功了，本文主要参考：原博主：https://blog.youkuaiyun.com/Zsl9998/article/details/149690202

并在此基础之上写下此文章帮助自己后续回档，以及给小伙伴们排除错误，节省各位宝贵的时间，如有问题欢迎留言讨论~

第一步：安装前准备
若已安装Node.js，需彻底卸载避免冲突
1.控制面板卸载：进入控制面板 → 卸载Node.js程序。

2.删除残留文件：

删除安装目录：C:\Program Files\nodejs（或自定义路径）
删除用户目录下的.npmrc文件：C:\Users\用户名
清理以下目录（若存在）：

C:\Program Files (x86)\Nodejs  
C:\Users\用户名\AppData\Roaming\npm  
C:\Users\用户名\AppData\Roaming\npm-cache

第二步：Nvm的下载与安装
1.1 Nvm下载
GitHub上的下载地址

Releases · coreybutler/nvm-windows · GitHubA node.js version management utility for Windows. Ironically written in Go. - Releases · coreybutler/nvm-windowshttps://github.com/coreybutler/nvm-windows/releases本人是在windows操作系统上进行开发，所以选择windows的版本

1.2 安装NVM

1. 正常安装，安装位置选择目录没有夹杂空格的目录即可。

安装准备(示例：本人在D盘下创建了Nvm文件夹，并在该文件夹下创建了nodejs文件夹)

2.双击运行 nvm-setup.exe

3.选择nvm安装路径（示例：D:\nvm，避免中文和空格）

4.设置Node.js存储路径（示例：D:\nvm\nodejs）

5.配置镜像加速（避免下载失败）

打开nvm安装目录下的 settings.txt 文件，添加以下内容：

将如下代码加入settings.txt文件中。

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

6. 安装成功能后请查看环境变量是否配置（默认nvm安装成功后，自动生成）

环境变量位置：

1.右击此电脑点击属性

2.选择高级系统设置

3.点击环境变量

7. 验证Nvm是否安装成功

完成安装后，以管理员身份打开CMD，输入 nvm -v 验证是否成功

第三步、使用Nvm安装node

1.win + R，调用cmd

安装完成后开始插入nodejs首先使用 nvm list available 查询可插入版本号，LST表示可插入稳定版本。【如未指定版本，建议安装LTS下的版本】

2.安装指定node.js版本（这里根据需求选择）

点我查看node相关版本号

这里需要单独说明一下的是，如果是维护旧的项目代码，不是版本越高越好，而且是要使用该项目所匹配的版本，部分老旧项目依赖如 node-sass@4.14.1、vue-loader-v16 等，是为 Node.js 12/14/16 设计的。Node.js v18 对二进制模块（如 node-sass）支持差，会导致安装失败或运行报错。

本人这里下载了两个版本的node，项目使用的是比较老的版本12.16.0，这里的版本号大家根据自己的需求来选择版本号

nvm install 18.16.0 #根据自己的需求选择版本号

3.安装完成后使用nvm use v命令使用安装的node版本

可以分别输入命令行 node -v 和 npm -v，检验node.js以及对应npm是否安装成功

4.nvm list 查看当前已安装的node.js版本，带*号的是正在使用的

5.安装成功后的文件夹显示

另外：相关命令供参考：

nvm list available    # 查看可下载的node版本
nvm install v    #下载node指定版本 v(版本号) 如:nvm install 20.11.1
nvm list    #查看已下载的node版本
nvm use v    #使用node指定版本 注:use指令需要使用管理员权限
nvm uninstall v #卸载指定版本 如:nvm uninstall 20.11.1

2.3 修改npm默认镜像源为淘宝镜像

修改npm镜像源为淘宝镜像，加快npm包的下载速度，减少发生连接错误和超时的概率。

1.在命令提示窗口运行下面命令

npm config set registry https://registry.npmmirror.com

2.检查是否设置淘宝镜像成功

npm config get registry

第四步：

配置node环境变量

3.1创建目录

在Node.js存储路径下新建 node_global 和 node_cache 文件夹

3.2 设置npm全局路径：

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

3.3 配置环境变量path
1. 编辑用户变量中的Path

注意：【用户变量】中的path变量，%NVM_HOME% 和 %NVM_SYMLINK% 理论上是nvm安装成功后自动生成的。> 如果有C:UsershuaAppDataRoaming npm，则将其修改为D:\NVM\node_global，如果没有就自己新建D:\NVM\node_global，总之保证有以上内容。

2. 再设置系统变量 — Path变量的设置和用户变量中一致

3.4 添加系统变量：
新建 NODE_HOME → 值：D:\nvm\nodejs

D:\tools\nodejs\node_global\node_modules 就是上面创建的全局模块安装路径文件夹

四、测试安装全局模块（测试环境变量配置）

测试是否环境变量是否配置成功，在cmd窗口中输入以下指定全局安装express模块

npm install -g express

安装成功的话表示环境变量配置成功

五、安装Vue

1.确保配置了淘宝的镜像源，可以用npm config get registry进行测试

2.安装vue、vue-cli、webpack

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

3.检查Vue是否安装成功

使用vue -V命令

返回版本号 则说明安装成功，注意V是大写，小写不成功

最后再次感谢原文博主的辛苦付出，使得我能快速的完成NVM的安装。

原文地址：nvm安装、管理node多版本以及配置环境变量【保姆级教程】_node配置环境变量-优快云博客