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

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

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

①删除要启动项目里的 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://[email protected]/nhn/raphael.git
npm ERR! [email protected]: 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://[email protected]/nhn/raphael.git

npm ERR! [email protected]: 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)后项目成功运行。



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

猜你喜欢

转载自blog.csdn.net/Daisy_ls/article/details/127222621