首页 前端知识 【完美解决】npm install 报错pngquant failed to build, make sure that libpng-dev is installed

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

2024-06-11 09:06:01 前端知识 前端哥 298 114 我要收藏

解决办法直接看 【解决方案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、可能遇到的问题

  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
转载请注明出处或者链接地址:https://www.qianduange.cn//article/11955.html
标签
windows
评论
发布的文章

HTML5-本地存储浅谈

2024-06-19 08:06:18

JS实现倒计时功能

2024-06-19 08:06:34

HTML黑客帝国字母雨

2024-06-11 09:06:45

每天一篇之HTML(2)

2024-06-19 08:06:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!