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

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


真的好坑,有个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、可能遇到的问题

  1. 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
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值