vue开发环境配置（node多版本切换，nvm安装）_node版本切换

最近在依赖问题上由于我安装的node版本适配性不全面，因为是在云内断网开发，使用不了nvm工具）有时候会因为node的版本过高或者是太低用命令启动时候而报错，试了一下是否可以安装一个高版本和低版本的node在一个系统中，你如果需要高版本的切换高版本的node，如果需要低版本的切换低版本的node，这样这个问题就会完美解决了。这里以小白视角分享配置步骤:

一、下载node的zip压缩包：

这里推荐版本：10.x  12.x  14.x  16.x  18.x 20.x

 下载官网地址如下：

Index of /dist/

 百度网盘链接：

v10.9.0

v12. 16.0 、  v14. 18.0、   v16.9.0、   v18.9.0、   v20.8.0均如上图操作。

安装好后，在D盘创建一个空文件夹NODE，分别创建好 v10. 9.0 、v12. 、v16.0、  v14.、    v16. 、   v18.、   v20.文件夹存放，便于区分版本号。如下图：

二、卸载node旧版本

（方法一）控制面板中找到卸载应用：

找到node并卸载

（方法二）

win下查找uninstall node.js

必须删除如下文件

C:\Users\用户名\AppData\Roaming目录下的npm和npm-cache；

C:\Users\123\AppData\Local\目录下的npm-cache

三、解压，并配置环境变量

（一）创建新文件夹

D盘新建了几个文件夹中操作，并将文件解压到对应文件夹：

如果你是以安装程序进行安装注意下面细节:

1.安装多个版本的node的时候一定要从低版本开始安装,如果你先安装高版本的话会出现许多问题,如果你已经安装啦,先卸载掉然后进行下面的步骤

2.在安装新的版本之前,我们需要做的就是先找到之前的那个版本的安装目录,也就是D:\NODE\6.9.4,然后把6.9.4这个文件夹给他重命名(因为你如果不修改名字的话你在安装新版本的时候无论你安装在什么地方,都会把之前的那个干掉覆盖掉)

（二）环境变量:

控制面板打开，输入高级，打开环境变量

在系统变量新建如下操作：

（1）首先创建一个变量：

变量名：NODE_HOME

变量值：%NODE_HOME10%

（2）再创建如下变量

（变量值一定是对应你的路径），如上图同样操作新建：

变量名：NODE_HOME10

变量值：D:\NODE\node-v10.9.0\node-v10.9.0-win-x64

变量名：NODE_HOME12

变量值：D:\NODE\node-v12.16.0\node-v12.16.0-win-x64

变量名：NODE_HOME14

变量值：D:\NODE\node-v14.18.0\node-v14.18.0-win-x64

变量名：NODE_HOME16

变量值：D:\NODE\node-v16.9.0\node-v16.9.0-win-x64

变量名：NODE_HOME18

变量值：D:\NODE\node-v18.9.0\node-v18.9.0-win-x64

变量名：NODE_HOME20

变量值：D:\NODE\node-v20.8.0\node-v20.8.0-win-x64

打开系统变量里面的path进行操作：

（三）测试

（1）命令行查看

配置完以后，测试一下，win+R 输入 cmd， 在cmd窗口输入 node -v

由于NODE_HOME选定了NODE10版本：

（2）切换node版本

NODE_HOME选定其他版本即可：

比如更换为NODE18

 配置完以后，测试一下，win+R 输入 cmd， 在cmd窗口输入 node -v

可以看到正常更换了。

 五、设置node20的全局安装路径和缓存路径

由于版本过多这里仅仅以20为例说明：其余版本查询网络

（1）新建文件夹

在nodejs安装路径下，新建node_global和node_cache两个文件夹。此处node.js安装路径为：D:\NODE\node-v20.8.0\node-v20.8.0-win-x64。

（2）设置缓存文件夹

在cmd命令下执行：

npm config set cache "node_cache路径"

（3）设置全局模块存放路径

在cmd命令下执行：

npm config set prefix "node_global路径"

 

设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\NODE\node-v20.8.0\node-v20.8.0-win-x64\node_global 里。

 六、基于Node.js安装cnpm，淘宝镜像安装请移步其他博主教程

npm install -g cnpm

// 查看已设置代理
npm config get registry

如果错误，还原镜像操作如下：

npm config set registry=https://registry.npmjs.org 

鉴于cnpm和npm争宠执行如下命令：

 cnpm i --by=npm

 设置环境变量：

D:\NODE\node-v18.9.0\node-v18.9.0-win-x64\node_global

 检查是否安装成功：

输入 cnpm -v 。

七、安装vue-cli 脚手架

 在cmd命令下执行：

npm install -g vue-cli

 

安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

 注：如果出现“'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件”的报错，可以参考 解决‘vue‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件的方法_vue不是内部或外部命令,也不是可运行的程序-CSDN博客 解决。

五、创建vue项目。

1、首先在D盘下新建一个文件夹，命名为vue_project，作为要存放vue项目的目录（此处我以C盘示范）。然后使用命令行cd进入到该存放目录输入：

vue init webpack vuedemo

vuedemo 就是你要创建的项目名称，可自定义。命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。

随后参照如下图设置：

选项说明：

Project name (vuedemo)    项目名称，可直接回车，使用括号中默认名字（注意这里的名字不能有大写字母，如果有会报错）

Project description (A Vue.js project)   项目描述，也可直接点击回车，使用默认描述

Author ()    作者，输入你的名字，确定则回车

Vue build (Use arrow keys)  构建模式，默认选择第一种
> Runtime + Compiler: recommended for most users  运行时+编译器：建议大多数用户使用
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅限运行时：大约6KB min+gzip，但模板（或任何特定于Vue的HTML）只允许在.Vue文件中使用-其他地方需要呈现函数

Install vue-router? (Y/n)   是否安装引入vue-router  这是官方的路由，大多数情况下都使用  建议y

Use ESLint to lint your code? (Y/n)  是否使用ESlint语法，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用，建议y

接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接选第一个回车

Set up unit tests (Y/n)  是否安装单元测试  建议n

Setup e2e tests with Nightwatch? (Y/n)  是否和Nightwatch建立端到端的测试  建议n

Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  是否在项目创建之后运行“npm install”   建议选择第三个
Yes, use NPM 是的 用npm 建议默认
Yes, use Yarn 是的 用yarn 跟npm没什么大的区别
> No, I will handle that myself 不 我要自行安装 (选择此项之后 后续仍通过npm install 再次安装)

.......回车之后  等待安装

回答完选项后如上图开始构建vue项目。

 2、构建完成后，可以看到存放目录下多出了一个项目文件夹vuedemo：

然后cd进入这个文件夹路径下，执行 npm install 安装依赖：

 npm install ：安装所有的模块，如果是安装具体的哪个模块，在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装（这个文件里面是不允许有任何注释的），每个使用npm管理的项目都有这个文件，是npm操作的入口文件。因为是初始项目，还没有任何模块，所以我用npm install 安装所有的模块。安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。

依赖安装好后，vuedemo文件夹里的目录是这样的：

 3、cd进入vuedemo项目文件夹下，执行 npm run dev ，启动项目。

 4、在浏览器地址栏输入 http://localhost:8080，访问这个vue项目，启动成功后浏览器会默认打开一个“欢迎页面”：

至此，windows下vue开发环境搭建及配置，并创建一个vue项目完成。

八、nvm安装

什么是 NVM？

顾名思义，NVM 是一种用于管理设备上的 Node 版本的工具。

你设备上的不同项目可能使用不同版本的 Node.js。对这些不同的项目仅使用一个版本（由 npm 安装的版本）可能无法为你提供准确的执行结果。

例如，如果你将 10.0.0 的 Node 版本用于使用 12.0.0 的项目，则可能会出现一些错误。如果你用 npm 将 Node 版本更新到 12.0.0，并且你将它用于使用 10.0.0 的项目，你可能无法获得预期的体验。

事实上，你很可能会收到一条警告：

This project requires Node version X

无需使用 npm 为你的不同项目安装和卸载 Node 版本，你可以使用 NVM，它可以帮助你有效地管理每个项目的 Node 版本。

NVM 允许你安装不同版本的 Node，并根据你正在通过命令行处理的项目在这些版本之间切换。

在接下来的部分中，我将向你展示如何在你的 Windows、Linux 或 Mac 设备上安装 NVM。

在继续之前，如果你已经安装了 Node.js，我还建议你卸载它，这样就不会有 Node.js 和 NVM 之间的任何冲突。

如何在 Windows 上安装 NVM？

NVM 主要在 Linux 和 Mac 上得到支持。它不支持 Windows。但是 coreybutler 创建了一个类似的工具，用于在 Windows 中提供 NVM 体验，叫作 nvm-windows。

nvm-windows 提供了一个管理实用程序，用于在 Windows 中管理 Node.js 版本。以下是它的安装方法：

1.点击“立即下载”

在 nvm-windows 仓库的 Readme 文件中，单击“立即下载”：

这将打开一个显示不同 NVM 版本的页面。

2.安装最新版本的 .exe 文件

在最新版本（截至撰写本文时为 1.1.9）中，你会发现不同的资源。单击 nvm-setup.exe 资源，它是该工具的安装文件：

3.完成安装向导

打开你下载的文件，然后完成安装向导。

完成后，你可以通过运行以下命令确认 NVM 已安装：

nvm -v

如果 NVM 安装正确，此命令将显示已安装的 NVM 版本。

如何在 Linux 和 Mac 上安装 NVM

由于 Linux 和 Mac 有一些相似之处（它们都是基于 UNIX 的操作系统），因此你可以以类似的方式在它们上安装 NVM。

1.运行 NVM 安装程序

在你的终端中，像这样运行 NVM 安装程序：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 
# or
 
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

你可以根据设备上可用的命令使用 curl 或 bash。

这些命令会将 NVM 仓库克隆到设备上的 ~/.nvm 目录。

2. 更新你的个人资料配置

第 1 步的安装过程还应该自动将 NVM 配置添加到你的配置文件中。如果你使用的是 zsh，那将是 ~/.zshrc。如果你使用的是 bash，那将是 ~/.bash_profile... 或其他一些配置文件。

如果它没有自动添加 NVM 配置，你可以自己将其添加到你的配置文件中：

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

上面的这个命令会加载 NVM 以供使用。

3.重新加载 shell 配置

随着你的配置文件配置更新，现在你将重新加载配置以供你的终端使用：

source ~/.bashrc

执行此命令后，NVM 就可以使用了。你可以通过运行以下命令确认 nvm 已正确安装：

nvm -v

这应该会显示所安装的 NVM 的版本。

总结

安装了 NVM 后，你现在可以在你的 Windows、Linux 或 Mac 设备中安装、卸载和切换不同的 Node 版本。

你可以像这样安装 Node 版本。

nvm install latest

此命令将安装最新版本的 Node：

nvm install vX.Y.Z

这将安装 X.Y.Z Node 版本。

你还可以通过运行以下命令将版本设置为默认版本：

nvm alias default vX.Y.Z

如果你想在任何时候使用特定版本，你可以在终端中运行以下命令：

nvm use vA.B.C

NVM 使管理需要不同 Node.js 版本的不同项目变得更加容易。

部分问题结合自身可以上网查询