vue项目npm install失败的问题解决方案

 更新时间:2025年01月31日 10:11:28   作者:岑梓铭  
本文主要介绍了vue项目npm install失败的问题解决方案,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

vue的项目一直是史上最难的最烦的问题,今天给别人做毕设单子想在gitee上拉项目二开的时候,由于很久没写过vue项目已经生疏了,在拿到项目之后我还是例行完成最常见的步骤:

1、npm init -y 初始化

2、npm install 用npm把这个项目的依赖包都下载了

结果就出现了npm install一直在那转就是没任何变化的现象:

1、找到问题所在

为了解决这个问题,首先我们得知道是为什么导致的,那就得输出一些日志,不然连解决的问题是啥都不知道

首先【Ctrl + C】杀掉当前运行的程序

然后输入这个命令来在安装的时候输出日志:【npm install --verbose】

然后将这个日志拿去问AI是为啥:

那么我这里AI给出的结论是我的npm下载配置文件里的【镜像源路径】(https://registry.npm.taobao.org/) 已经过期,也就是npm根据我这个配置文件在一直找一个不存在的路径,所以没法下载

2、针对问题解决

1)更换有效最新的npm下载镜像源

那么通用的办法就是上网搜最新的npm镜像源下载地址,比如我搜到的目前2025年最新的地址是:

淘宝:https://registry.npmmirror.com/ 
腾讯云:https://mirrors.cloud.tencent.com/npm/ 
CNPM:https://r.cnpmjs.org/

对应执行的更换配置的命令是:

npm config set registry [镜像源地址]

比如:
-淘宝:npm config set registry https://registry.npmmirror.com/ 
-腾讯云:npm config set registry https://mirrors.cloud.tencent.com/npm/ 
-CNPM:npm config set registry https://r.cnpmjs.org/

2)检查更换成功没有

然后检查你当前的npm配置文件的路径更换成功没有:【npm get registry】

但是这里又有问题的了,我上面的那个更换npm镜像的方法是针对 “我这个电脑的全局的npm配置文件”,也就是检查整个电脑配置的全局的环境变量里npm的配置文件:【.npmrc】的配置

什么意思呢?就是我们自己的之前搭建vue项目的时候配置了一个全局的配置文件,我们自己写vue文件是基于这个电脑的整个环境下来搭建的,那自然用的就是这个配置文件,你可以去你的电脑:【C:\Users\你的用户名\.npmrc】这个路径来找到这个配置文件

或者用【Win + R】cmd打开终端,再输入【npm get registry】也会发现其实我们的配置没有问题

那么我们需要到自己的项目里打开终端来检查,当我们回到项目里,要在你这个项目的【根目录】打开终端,输入【npm get registry】,就可能会发现你刚刚的配置并没有成功

3)项目里还有一个【.npmrc】配置文件,也要改

经过检查之后才发现,原来这个项目里还有一个【.npmrc】文件,这个文件覆盖了全局的npm的那个配置文件,所以我们刚刚改的只是我们电脑里全局的那个配置文件,而不是这个项目里的局部配置文件,我们只需要把它也改了就行

4)如果是用nvm管理node.js的,还要检查nvm那里的setting文件

前面的情况是单独直接安装一个node.js的用户的情况,那么还有的人是用nvm管理node的,那么要到nvm的安装路径下,找到setting文件,检查这里的镜像路径

5)最后还要删除【package-lock.json】文件

这个文件会规定死每个依赖包的安装来源的路径,即便你所有的配置文件都配置了最正确的镜像源,这个文件还会误导npm去到各个错误的路径区下载依赖包

直接删掉,然后执行一下【npm cache clean --force】清除一下npm前面下载留下的一些错误缓存

然后再执行【npm install】,就大功告成了,也会生成新的【package-lock.json】文件

到此这篇关于vue项目npm install失败的问题解决方案的文章就介绍到这了,更多相关vue npm install失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue匿名插槽与作用域插槽的合并和覆盖行为

    Vue匿名插槽与作用域插槽的合并和覆盖行为

    这篇文章主要介绍了Vue基础-匿名插槽与作用域插槽的合并和覆盖行为 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Vue路由钩子之afterEach beforeEach的区别详解

    Vue路由钩子之afterEach beforeEach的区别详解

    这篇文章主要介绍了Vue路由钩子 afterEach beforeEach区别 ,vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结。需要的朋友可以参考下
    2018-07-07
  • 在项目vue中使用echarts的操作步骤

    在项目vue中使用echarts的操作步骤

    这篇文章主要介绍了在项目vue中使用echarts的操作步骤,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 如何在vue中更优雅的封装第三方组件详解

    如何在vue中更优雅的封装第三方组件详解

    在封装第三方组件中,经常会遇到一个问题,下面这篇文章主要给大家介绍了关于如何在vue中更优雅的封装第三方组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • vue 使用eventBus实现同级组件的通讯

    vue 使用eventBus实现同级组件的通讯

    这篇文章主要介绍了vue 使用eventBus实现同级组件的通讯,需要的朋友可以参考下
    2018-03-03
  • vue cli3.x打包后如何修改生成的静态资源的目录和路径

    vue cli3.x打包后如何修改生成的静态资源的目录和路径

    这篇文章主要介绍了vue cli3.x打包后如何修改生成的静态资源的目录和路径,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue插件tab选项卡使用小结

    vue插件tab选项卡使用小结

    这篇文章主要为大家详细介绍了vue插件tab选项卡的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Vue3中的h函数及使用小结

    Vue3中的h函数及使用小结

    这篇文章主要介绍了Vue3中的h函数及使用小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • vue2路由基本用法实例分析

    vue2路由基本用法实例分析

    这篇文章主要介绍了vue2路由基本用法,结合实例形式分析了vue2路由基本功能、原理、用法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • vue中使用element ui的input框实现模糊搜索的输入框

    vue中使用element ui的input框实现模糊搜索的输入框

    这篇文章主要介绍了vue中使用element ui的input框实现模糊搜索的输入框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11

最新评论