【完美解决】npm install 报错pngquant failed to build, make sure that libpng-dev is installed

解决办法直接看【解决方案3】

解决办法直接看【解决方案3】
- 一、问题描述
- 二、解决办法1：（网上推荐的，我安装后还是解决不了，仅供参考）
- - 1、先将自己的node版本降低
  - 2、以管理员身份运行PowerShell，并安装windows-build-tools
  - 3、可能遇到的问题
- 三、解决方案2（推荐）
- - 切换使用 cnpm 安装成功，没有报错误，如果能切换符合项目运行环境也可以试试。
- 四、解决方案3：（推荐，最简单，我用这个方法成功了）
- - 修复方法
  - - 一、找到 raw.githubusercontent.com 的 ip
    - 二、设置hosts文件
- 五、提示：使用npm安装时尝试切换安装源及node版本，使用的nrm、nvm。
- - 1、nrm（npm的镜像源管理工具）
  - 2、nvm(node版本管理工具)

真的好坑，有个vue3的项目在公司的电脑安装依赖好好的，回家用自己的电脑npm i安装依赖就疯狂报错，试了很多办法，都不行。

一、问题描述

npm i安装依赖报错，查了一下说是针对系统的一个问题，缺少什么东西。报错截图：
在这里插入图片描述

有说安装什么【前往 https://pngquant.org/ 下载pngquant库】，我试了，安装不上，
可能我还漏了什么，参考链接在这点击查看

以下解决办法都是在node版本16.16.0的环境下做的

二、解决办法1：（网上推荐的，我安装后还是解决不了，仅供参考）

1、先将自己的node版本降低

我原先使用的是node 16.16.0，然后降到8.6.0（没有做什么测试，不知道其他版本行不行），否则直接去安装

		npm install -g windows-build-tools

会一直卡在某个地方，reify:ajv: timing reifyNode:node_modules/windows-build-tools Completed in 488ms这里
在这里插入图片描述

2、以管理员身份运行PowerShell，并安装windows-build-tools

		npm install -g windows-build-tools

安装成功截图
在这里插入图片描述

3、可能遇到的问题

npm安装windows-build-tools时卡在Python 2.7 is already installed, not installing again.
解决办法参考这篇文章，点击查看

提示安装成功，再次运行npm i 别人安装成功

三、解决方案2（推荐）

切换使用 cnpm 安装成功，没有报错误，如果能切换符合项目运行环境也可以试试。

cnpm 安装命令

npm install -g cnpm -registry=https://registry.npm.taobao.org

安装依赖成功截图，cnpm i，可能你运行的时候还会报错，大部分是少安装了什么东西，你查看一下缺少了什么依赖cnpm i一下就行了
在这里插入图片描述

四、解决方案3：（推荐，最简单，我用这个方法成功了）

参考这篇文章，点这里
在这里插入图片描述
观察上面的错误信息，可以看到里面有个关键信息—— getaddrinfo ENOENT
下面简单介绍下这个异常信息：
“getaddrinfo ENOENT” 是一个错误消息，它通常在网络编程中出现。它表示在尝试解析主机名或服务时，找不到相应的条目。这可能是由于无法解析主机名、网络连接问题或服务不可用等原因引起的。

修复方法

一、找到 raw.githubusercontent.com 的 ip

打开cmd，ping 一下这个网站，现在好像ping不通了，我ping了是找不到主机，所以我跳过这一步了，直接拿博主ping的去修改。

ping raw.githubusercontent.com

可以拿到目标id：85.199.108.133

二、设置hosts文件

已经拿到 raw.githubusercontent.com 对应的 ip了，这时直接去绑定即可。
（1）找到hosts文件
host文件位置: C:\Windows\System32\drivers\etc\hosts
在这里插入图片描述
（2）更新hosts文件
在hosts文件最下面加上

185.199.108.133 raw.githubusercontent.com

在这里插入图片描述
最后再次运行安装成功！！！

npm i
npm run dev

在这里插入图片描述

五、提示：使用npm安装时尝试切换安装源及node版本，使用的nrm、nvm。

1、nrm（npm的镜像源管理工具）

安装

npm install -g nrm

常用命令

查看所有源
nrm ls
切换源（XXX为源名称）
nrm use XXX
添加源（XXX为源名称，url为源的地址）
nrm add XXX url
删除源（XXX为源名称）
nrm del XXX

2、nvm(node版本管理工具)

链接：https://github.com/coreybutler/nvm-windows/releases

下载：nvm-setup.zip

安装：双击.exe文件，一步步根据提示安装（之前安装过node需要先将之前安装的node卸载）

检查是否安装成功：

nvm
成功会出现对应的版本及一些命令。

常用命令：

安装指定版本（8.6.0为指定版本号）
nvm install 8.6.0
安装最新版本
nvm install latest
显示已安装的版本列表
nvm list
使用指定版本
nvm use 8.6.0
卸载指定版本
nvm uninstall 8.6.0