npm install安装报错gyp ERR

问题场景

        npm install安装时，报错如下：

gyp ERR! find VS msvs_version was set from command line or npm config

gyp ERR! find VS - looking for Visual Studio version 2022

gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt

gyp ERR! find VS checking VS2022 (17.10.35122.118) found at:

gyp ERR! find VS "C:\Program Files\Microsoft Visual Studio\2022\Community"

gyp ERR! find VS - found "Visual Studio C++ core features"

gyp ERR! find VS - found VC++ toolset: v143

gyp ERR! find VS - missing any Windows SDK

gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use

gyp ERR! find VS looking for Visual Studio 2015

gyp ERR! find VS - not found

gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8

gyp ERR! find VS

gyp ERR! find VS valid versions for msvs_version

解决

1. 安装 Visual Studio

        安装最新版本的 Visual Studio，安装包可以去官网下载，下载速度比较慢。

        安装时注意勾选 "Desktop development with C++" 。

        这里我选择安装的visual studio 2022。

2. 设置 npm 源

        淘宝的 原npm 镜像源已经废弃（https://registry.npm.taobao.org），现在新的镜像源通过以下命令设置：

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

3. 安装 Windows 构建工具

        这个命令很重要，用来安装一些构建工具（ python等），以便协助 Node.js编译：

npm install --global --production windows-build-tools

        若该命令无法生效，安装时指定下python的镜像源，采用如下命令：

npm --python_mirror=https://registry.npmmirror.com/-/binary/python/ install --global windows-build-tools 

4. 设置Visual studio路径

        安装特定版本的 Visual Studio后，可以通过以下命令设置 npm 配置路径。

4.1. 设置 msvs_version

        可以通过以下命令设置 npm配置 msvs_version:

npm config set msvs_version 2022 # 或者你安装的 Visual Studio 版本号

4.2. 设置 VCINSTALLDIR 环境变量

        如果以上设置完，npm install安装依旧报错gyp err，可能需要手动设置 VCINSTALLDIR 环境变量，指向 Visual Studio 的安装路径

# 需管理员权限打开
set VCINSTALLDIR C:\Program Files (x86)\Microsoft Visual Studio\2022\Community\VC

# 若使用powershell运行命令，需对含有空格的目录加双引号""，否则识别不到
set VCINSTALLDIR C:\"Program Files (x86)"\"Microsoft Visual Studio"\2022\Community\VC

4.3. 编辑 npm 配置文件

        如果 msvs_version 配置项不被识别，可以尝试直接编辑 npm 的配置文件 .npmrc。

        资源管理器地址栏输入 %UserProfile% 并按 Enter 键，打开包含 .npmrc 文件的目录。

        在 .npmrc 文件末尾添加：

msvs_version=2022 # 或者你安装的 Visual Studio 版本号

           我的 .npmrc 文件完整内容如下：

prefix=C:\Program Files\nodejs\node_global
cache=C:\Program Files\nodejs\node_cache
registry=https://registry.npmmirror.com/
strict-ssl=false
sass_binary_site=https://npmmirror.com/mirrors/node-sass
python=C:\Program Files\Python27\python.exe
node_gyp=C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js
msvs_version=2022

5. 删除旧的 node_modules 和 package-lock.json

        由于之前尝试过安装但失败了，所以需要删除项目中的 node_modules 文件夹和 package-lock.json 文件，然后重新运行 npm install。

        若仍然报错，尝试重启下电脑再 npm install。

一步一步来，总会解决的！