解决vue启动项目报错:npm ERR! Missing script: “serve“【详细清晰版】

发布于:2024-04-18 ⋅ 阅读:(25) ⋅ 点赞:(0)

问题描述

在启动vue项目时通常在控制台输入npm run serve
但是此时出现如下报错:

npm ERR! Missing script: "serve"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in: D:\Program Files\nodejs\node_cache\_logs\2024-04-11T09_19_12_214Z-debug-0.log

问题分析和解决

情况一

在该项目对应的json文件中,不是用serve命令来启动的,可能是start或dev。

解决方法

1.打开对应json文件,名字一般叫做package.json

在这里插入图片描述

2.找到scripts部分,查看启动是否对应serve

在这里插入图片描述
这里有的人第一行冒号后会有serve,有的人会和我的界面一样是个vite,这其实是vue版本的问题(有问题请评论区指正!),无需在意。
可以看见我第一行冒号前是dev,那么这时我要启动这个vue项目所使用的命令就应该是

npm run dev

大家根据自己的变量名是什么来更改,如果用vue2的话基本改成正确的名字启动就可以成功了~

情况二(常见于vue3)

当我们用新的命令运行后,出现如下报错

> vite-vue3-pinia@0.0.0 dev
> vite

'vite' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

说明我们没有安装vite(vite是vue3的前端构建工具,我的理解是一个包,可以通过命令行下载安装,具体理解可以参考这篇博客http://t.csdnimg.cn/wK7Y7)链接: 点击直达

解决方法

安装一下vite,这里有两种安装方法,一种是全局安装(需要配置系统环境变量)

npm install -g vite

我采用的是局部安装,在当前项目目录下安装vite。直接在idea或vscode的终端里,进入当前项目的根目录,运行该命令:

npm install vite --save-dev

安装成功后显示
在这里插入图片描述
之后运行我们之前的命令 npm run dev就可以成功启动vue项目了

情况三

这个项目之前的缓存没有清除,所以在你的电脑上运行会出现部分不兼容报错情况(这种就很玄学了)

解决方法

文件夹中如果有node_modules文件夹和package-lock.json文件,将其删除。
在这里插入图片描述

在终端输入如下命令,清除缓存

npm cache clean -force

重新安装依赖

npm install

在运行试试看~~希望对你有帮助(#.#)