Vue项目启动出现的问题及解决方法

news2025/2/27 5:28:40

今天在公司入职第二天,昨天拉下来的代码没有跑起来,看了各种博客也没有解决这个报错

今天一大早来公司,捋了一下顺序 

①删除要启动项目里的 node_modules 文件夹,这是vue项目的依赖包。

因为“node_modules”文件夹太大,一般不会打包上传到svn、git上的,所以没有这个文件夹就不用删。(图片借鉴博客(7条消息) 如何运行vue项目(详细步骤)_cs小朋友的博客-CSDN博客_运行vue

 ②删除package-lock.json。
package-lock.json记录了整个node_moudles文件夹的树状结构,还记录了模块的下载地址,但是它是基于项目作者的npm版本库生成的,若不删掉这个依赖文件,容易出现npm版本差异导致的报错。

 

③进入到要启动的项目文件夹,例如,我要打开Explore这个文件,那么我需要cd Explore(在这里我进的是Admin文件夹)

 ④输入命令npm clean cache -f,清除npm缓存,npm有缓存时,常常出现安装依赖不成功的现象,且一旦出现这个问题,报错信息很完善,但根据报错信息一项一项去解决,却死活解决不了,还找不出原因

⑤输入命令npm install,重新安装依赖。

这里开始报这个错误,(https://www.cnblogs.com/lijinwei/p/16564298.html)看了这篇博客才知道,我安装的是vue-element-admin 它是一个工具,怪不得跑起来是个全英文界面,

以下为npm install后报错的提示:

PS F:\AA\vue-element-admin-i18n> npm install
npm ERR! code 128
npm ERR! An unknown git error occurred
npm ERR! command git --no-replace-objects ls-remote ssh://git@github.com/nhn/raphael.git
npm ERR! git@github.com: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\LJW\AppData\Local\npm-cache\_logs\2022-08-08T12_48_25_162Z-debug-0.log

翻译过来就是

npm ERR! code 128 -----------错误码128

npm ERR! An unknown git error occurred---------------发生未知的git错误

npm ERR! command git --no-replace-objects ls-remote ssh://git@github.com/nhn/raphael.git

npm ERR! git@github.com: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.------------
致命问题:无法从远程存储库读取数据。

npm ERR!
npm ERR! Please make sure you have the correct access rights---------------------请确保您有正确的访问权限
npm ERR! and the repository exists.--------------------并且存储库已经存在。

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\LJW\AppData\Local\npm-cache\_logs\2022-08-08T12_48_25_162Z-debug-0.log

解决方法:

查博客,让我安装淘宝镜像:

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

然而出现了新的错误fatal: unable to access 'https://github.com/nhn/raphael.git/': OpenSSL SSL_read: Connection was reset, errno 10054

于是又查博客(https://blog.csdn.net/wang306033/article/details/125201682)这篇有详细方法,

原因:下载安装的依赖包太大,导致git请求超时了,可以通过修改git http.postBuffer的大小来解决此问题。

解决方案:

*修改postBuffer值 注:524288000(500Mb)*可以自己根据情况设置

特别注意:
由于Github位于外网,故改动后仍会因为网络原因造成install失败的几率,可以多尝试npm install几次,
其他相关问题大概率切换npm源能解决问题

 npm config set registry https://registry.npm.taobao.org


检测是否切换到了淘宝源

npm info underscore

解决完这些问题,就开始正常操作

重复输入命令npm install,重新安装依赖。此时一路绿灯

⑥输入命令npm run build 打包。

然而此时打包也出现错误

PS D:\****\*****> npm run build
npm ERR! missing script: build

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\***\AppData\Roaming\npm-cache\_logs\2020-11-25T02_01_03_914Z-debug.log

在package.json中 scripts下有 “build:prod”: "vue-cli-service build"

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "new": "plop"
  },

SO 不能用 npm run build来打包
应该用

npm run build:prod --report

⑦最后输入命令npm run dev/npm run serve(或者npm rum xxx)后项目成功运行。
这里注意有可能不同,npm run dev是vue-cli2.0版本使用的,npm run serve 是vue-cli3.0版本使用的,npm run xxx 中的 xxx 可以理解为键值对的 key,实际上 run 的是在 package.json 里面 scripts 配置的 value。

vue cli2.0

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
}

vue cli3.0

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

好了项目启动起来了,但是它是个工具,hhhh尴尬,我还以为是项目呢

 

接下来跑项目

①删除要启动项目里的 node_modules 文件夹,这是vue项目的依赖包。

 ②删除package-lock.json。

③进入到要启动的项目文件夹,例如,我要打开Explore这个文件,那么我需要cd Explore

④输入命令npm clean cache -f,清除npm缓存

⑤输入命令npm install,重新安装依赖。

⑥输入命令npm run build 打包。

⑦最后输入命令npm run dev/npm run serve(或者npm rum xxx)后项目成功运行。



其他错误 多查查相关资料和求助各平台的大佬 具体情况具体分析,多问多看多想

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405260.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录

这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~ 主页: oliver尹的主页 格言: 跌倒了爬起来就好~ 《Vue插件…

Moment.js的基本使用

一、Moment.js的简介 Moment.js是一个轻量级的JavaScript时间库,以前我们转化时间,都会进行很复杂的操作,而Moment.js的出现,简化了我们开发中对时间的处理,提高了开发效率。日常开发中,通常会对时间进行下…

React面试题最全

1.什么是虚拟DOM? 虚拟DOM是真实DOM在内存中的表示,ul的表示形式保存在内存中,并且与实际的DOM同步,这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤,整个过程被称为调和 2.类组件和函数组件之间的区别是什么…

【uni-app】小程序实现微信在线聊天(私聊/群聊)

之前学习使用uni-app简单实现一个在线聊天的功能,今天记录一下项目核心功能的实现过程。页面UI以及功能逻辑全部来源于微信,即时聊天业务的实现使用socket.io,前端使用uni-app开发,后端服务器基于node实现,数据库选择m…

vue3生命周期及setup介绍

🌷 生命周期 下图对比了vue3(左)和vue2(右)的生命周期:vue3将destoryed该名成了unmounted,相应的beforeDestory改成了beforeUnmounted。除此之外在组合式API中新增了个钩子函数:set…

vue项目:大屏自适应解决方案(两种)

css缩放方案: 利用transform:scale 进行适配 推荐使用v-scale-screen 值得注意的是: vue 2.6、2.7 要使用 npm install v-scale-screen1.0.2 vue3:要使用v-scale-screen版本 npm install v-scale-screen2.0.0 用法&#x…

解决npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘)

文章目录1. 复现问题2. 分析问题3. 解决问题1. 复现问题 今天准备克隆Redis桌面(GUI)管理客户端,故按照官方文档给出的指令运行时,如下图所示: 但在执行指令npm install --platformwin32却报出如下图错误: PS D:\Software\Redis…

Vue中使用Datav 完成大屏基本布局

效果图 大屏前言 在实际开发过程中,我们经常需要一个大屏进行一些常规数据的展示。在Vue中也是提供了这样的容器组件 我们可以使用基于Vue的 Datav组件 Vue-Baidu-Map地图组件 Echarts图表组件 时间戳就实现基本布局 在Vue中配置大屏路由的时候,我们…

vue播放rtsp视频流

工作有要播放视频监控的需求,最近就自己先了解了一下网页播放rtsp视频流的方法,以下是我的个人经验。 最终选择了vuewebrtc-streamer实现在网页播放rtsp流这种方法进行测试。 个人经验 第一次尝试了vue-video-playervideojs的方法,发现只适…

WPS JS宏入门案例集锦

JS宏官方API文档:https://qn.cache.wpscdn.cn/encs/doc/office_v19/index.htm 批量创建工作表/簿 批量创建工作表: function 批量创建工作表(){for (var city of ["成都","上海","北京"]){let sht Worksheets.Add();s…

无需本地部署 在线使用Stable Diffusion Webui 使用共享模型

尝试本地部署Stable Diffusion的时候遇到了很多的麻烦,自己训练AI也非常的麻烦,可以尝试使用Webui使用别人上传的模型第一步进入网站https://github.com/camenduru/stable-diffusion-webui-colab向下拉到readme第一个 stable_diffusion_webui_colab&…

前端常见八大设计模式

一、设计模式是什么? 设计模式是在某种场合下对某个问题的一种解决方案。设计模式是通过概念总结出来的模版,总结出来的固定的东西。每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心。 二、设计原则–设计模…

给女友的网页小惊喜,(生日,周年,表白通用) ☞谁说程序员不懂浪漫

有女朋友的拿去给女朋友一个惊喜&#xff0c;没女朋友的拿去表白&#xff0c;或者NEW它10000000个&#xfeff;ε≡٩(๑>₃<)۶ 文章目录前言适用范围网页展示登录界面文字界面图片界面尾部界面获取源码前言 前些日子是女友的一周年&#xff0c;康康想用一种特殊的方式…

vue实现导出word文档(含多张图片)

一、实现效果 以填写并导出房屋出租审批表为例&#xff0c;首先填写表格相应内容后&#xff0c;点击" 导出 "按钮实现word文档的导出功能&#xff0c;界面如下所示&#xff1a; 最后导出word文档如下所示&#xff1a; 二、所需插件 这里使用npm对以下所需依赖进…

【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端

配套视频地址&#xff1a;https://www.bilibili.com/video/BV1dG4y1T7yp/ 前端笔记 1. node环境 官网&#xff1a;https://nodejs.org 注意&#xff0c;node可以比我稍低&#xff0c;但不要更高 2. 下载vue-admin-template https://panjiachen.gitee.io/vue-element-admin…

HTML表格合并行和列

HTML表格合并行和列1.合并行&#xff1a;rowspan2.合并列&#xff1a;colspan1.合并行&#xff1a;rowspan 在设计表格时&#xff0c;有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格&#xff08;类似Word的表格合并&#xff09;&#xff0c;这个时…

2023前端最新高频面试题总结(附答案)

目录 1.vue双向数据绑定的原理&#xff1f; 2.vue的生命周期有哪些 3.v-if 和v-show有什么区别&#xff1f; 4.async await 是什么&#xff1f;它有哪些作用&#xff1f; 5、数组常用的方法&#xff1f;哪些方法会改变原数组&#xff0c;哪些不会 6.什么是原型链&#xf…

前端网页设计必逛的六个宝藏网站(非常值得收藏)

&#x1f389;个人主页&#xff1a;这个昵称我想了20分钟 ✨往期专栏&#xff1a; 【速成之路】jQuery 【SQL server速成之路】 素材网站✨iconfont阿里巴巴矢量图标库  ✨美叶  ✨IconPark  ✨pexels  ✨COLOR  ✨Uigradients✨iconfont阿里巴巴矢量图标库 网站入口…

【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

目录 前言 App、H5效果 小程序效果 一、兼容APP、H5的方式 二、兼容小程序 三、实现同时兼容 前言 首页都会提供一个搜索框给到客户&#xff0c;让客户自己去搜索自己想要的内容&#xff0c;这里就需要导航栏&#xff0c;来实现搜索页面的跳转&#xff0c;效果如下 App…

Vue框架教程-从入门到项目实战

创建Vue项目 我们通过vue-cli创建一个vue项目&#xff0c; 在cmd窗口输入 vue ui 进入vue-cli可视化界面&#xff08;如果无效请升级vue-cli版本&#xff09;点击创建&#xff0c;选择一个项目目录输入项目名称和git初始化窗口(可选)选择预设&#xff0c;可以选择手动和预定的…