Vue项目npm操作npm run serve或npm run dev报错及二者的区别

更新时间：2023年10月30日 15:06:49 作者：黛琳ghz

这篇文章主要介绍了Vue项目npm操作npm run serve或npm run dev报错及二者的区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题分析

我们在启动vue项目的时候，需要用到npm操作，比如使用npm run serve或npm run dev。

比如说我们下载其他人的开源vue项目时，我们想在本地运行时，我们用的到npm run serve或npm run dev有时候会出现报错，无论是serve还是dev都有出现报错的情况。

报错原因

这个是npm run serve报错的原因，错误很简单，重点看这一句Missing script: "serve"

然后找到package.json，查看"script"这个对象，script里面确实没有serve，而是dev

然后用npm run dev来启动vue项目，发现项目可以启动成功

同理，npm run dev报错情况也是这样解决，直接上图

二者区别

首先我们要知道"script"是什么❓

翻译一下

因此我们可以知道不论是dev还是serve等这些值代表了该点可以run的命令

所以我们在运行 npm run serve 的时候，其实是在运行命令 vue-cli-service serve 。

通过上面的例子，我们可以看到，在package.json的script对象里，无论是serve还是dev对应的命令都是vue-cli-service serve，那么二者有什么区别呢？

通过对比脚手架版本(vue-cli)，我们可以发现不同的版本默认配置是不一样的

vue-cli2.0中

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

vue-cli3.0中

 "serve": "vue-cli-service serve",

因此我们在启动vue项目时，我们可以先查看清楚脚手架的版本(查看package.json)，再去启动

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3+TS实现数字滚动效果CountTo组件
最近开发有个需求需要酷炫的文字滚动效果，发现vue2版本的CountTo组件不适用与Vue3,没有轮子咋办，那咱造一个呗，感兴趣的小伙伴可以跟随小编一起了解一下
2022-11-11
vue中关于redirect(重定向)初学者的坑
这篇文章主要介绍了vue中关于redirect(重定向)初学者的坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue中根据判断条件添加一个或多个style及class的写法小结
这篇文章主要介绍了vue中根据判断条件添加一个或多个style及class的写法,文中给大家补充介绍了关于vue里:class的使用结合自己的实现给大家讲解，需要的朋友可以参考下
2023-03-03
Vue实现万年日历的示例详解
又是一个老生常谈的功能，接下来会从零实现一个万年日历，从布局到逻辑，再到随处可见的打卡功能。文中的示例代码简洁易懂，需要的可以参考一下
2023-01-01
在Vue3项目中关闭ESLint的完整步骤
实际上在学习过程中,你会发现eslint检查特别讨厌,这个时候我们需要关闭掉eslint检查,下面这篇文章主要给大家介绍了关于在Vue3项目中关闭ESLint的完整步骤,需要的朋友可以参考下
2023-11-11
vue的v-if里实现调用函数
这篇文章主要介绍了vue的v-if里实现调用函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue Cli项目重构为Vite的方法步骤
本文主要介绍了Vue Cli项目重构为Vite的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Vite中自制mock服务器(不使用第三方服务)
本文主要介绍了Vite中自制mock服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
VUE配置history路由模式配置详细举例
这篇文章主要给大家介绍了关于VUE配置history路由模式配置的相关资料,History模式是Vue路由的另一种模式,在History模式下URL中的路径不再使用#符号,而是直接使用正常的路径形式,需要的朋友可以参考下
2023-12-12
Vue uni-app以H5模式引入Jquery配置教程
这篇文章主要为大家介绍了Vue uni-app以H5模式引入Jquery配置教程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09