关于Vue项目npm操作中npm run serve或npm run dev报错以及二者区别

已于 2023-04-22 01:08:08 修改
阅读量7.1k 收藏 38
点赞数 9
分类专栏： 前端 # Vue Daily Debug 文章标签： vue.js npm javascript vue-cli
于 2022-10-21 01:59:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53231455/article/details/127437989
版权
本文分析了在启动Vue项目时遇到npm run serve或npm run dev报错的问题。报错原因是package.json的scripts中缺少指定的命令。通过查看package.json，发现在不同Vue CLI版本中，serve和dev命令可能不同，如vue-cli 2.0使用'dev'，而vue-cli 3.0使用'serve'。解决方法是根据项目的Vue CLI版本选择正确的启动命令。文章还强调了serve和dev在不同版本中可能对应相同命令，即vue-cli-service serve，并探讨了它们的实际区别在于不同版本的默认配置差异。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

📚文章目录

🎯问题分析

📄报错原因

🧩二者区别

🎯问题分析

  • 我们在启动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)，再去启动

前端开发：npm run serve和npm run dev的区别
全沾软贱开发攻城狮
12-04 4万+
前端开发过程中运行Vue项目的时候，有时候使用npm run serve命令可以启动项目，有时候却会报错；有时候使用npm run dev命令可以启动项目，有时候却也会报错。是什么原因造成这种情况呢，原因在于Vue脚手架版本的问题，也可以理解为执行配置的脚本问题，有的脚手架版本支持npm run serve命令启动项目，有的脚手架版本却支持npm run dev命令启动项目。那么本篇博文就来分享一下怎么避免由于脚手架版本不同造成的启动项目时候的报错问题。 先来分享一个运行npm run serve命令启动
关于vue的npm run dev和npm run build
weixin_30852367的博客
06-30 2769
├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue-loader.conf.js │ ├─webpack.base.conf.js │ ├─webpack.dev.conf.js │ ├─webpa...
在终端使用npm run dev 命令运行vue项目时报错npm ERR! code EPERM npm ERR! syscall opennpm ERR!
kkdmmm的博客
03-03 1094
输入npm run dev 命令时出现：以下错误1.在网上找解决办法修改了C:\Users{账户}\下的.npmrc文件，选择将隐藏取消掉发现运行还是报原来的错2.后来发现是权限的问题。
Vue项目运行 npm i 报错，解决方法
最新发布
qq_74336362的博客
02-27 383
检查nodejs是否正常 ，如果输入node报错，那则是nodejs版本问题亦或者没有nodejs，就得去官网下载适配的nodejs；有版本号就是有下载nodejs，那就是可能是没有use，输入命令 nvm use 20.16.0（这里输入的是你的要用的版本号）检查路径，我们要先检查是否是路径出了问题，是否在你所clone 的文件夹里运行npm i。路径没问题还报错，则可以去clone文件目录下输入cmd，按回车，打开终端，如下，也有可能是没有use（有下载nvm的情况）这个时候再输入 npm i，
npm run dev/build/serve
niceyoo的博客
12-12 2654
npm run dev/build/serve 1、ERR引发的思考 npm run dev npm ERR! missing script: dev npm ERR! A complete log of this run can be found in: npm ERR! E:\nodejs\node_cache\_log...
npm run dev 和 npm run serve区别
song_6666的博客
04-14 1万+
在运行vue文件时，需要进行npm操作，但我们发现，有时候用的是npm run serve，而有的时候用的是npm run dev，二者有什么区别 在我们运行一些 vue 项目的时候，输入npm run serve或者 npm run dev的其中一个时，系统会报错： PS C:\Users\123456\Desktop> npm run dev npm ERR! missing script: dev npm ERR! A complete log of this run can be fou
深入解析 Vue.js 项目的启动奥秘：npm run dev 与 npm run serve
qq_44103359的博客
05-18 6390
在 Vue.js 项目开发中，和是两个常见的命令，用于启动开发服务器。这两个命令虽然都服务于同一个目的——启动开发环境，但它们在实现细节和用途上有所不同。本文将深入探讨这两个命令的启动过程，并揭示它们之间的区别。
npm run dev和npm run serve
专注Java（全栈）应用开发，求知若渴，虚心若愚，talk is cheap, show me the code.
12-03 2171
网络爬虫的是一个非常常见的需求。npm实际上是nodejs官方提供的包管理平台，npm提供了一个命令行工具npm-cli，在我们使用npm这个命令时，我们实际是通过node运行一个名为npm-cli.js的脚本在构建项目时，通过npm install命令，会在项目目录下生成一个名为node_modules的文件夹在package.json文件中，有一个scripts的字段 3.npm run serve npm run serve的时候是运行vue-cli-service serv node_module
关于vue的npm run dev和npm run build的区别介绍
10-17
在Vue项目中，我们经常会遇到两种常用的npm脚本命令：`npm run dev`和`npm run build`。这两个命令分别用于启动开发服务器和构建生产环境的应用程序。下面详细介绍一下这两个命令的区别。 1. npm run dev `npm run ...
Vue项目执行 npm run dev 报错解决方法
01-07
Vue项目执行 npm run dev 报错解决方法 错误如下: Error: Cannot find module 'webpack-merge' at Function.Module._resolveFilename (module.js:440:15) at Function.Module._load (module.js:388:25) at Module....
解决vue项目运行npm run serve报错的问题
01-18
先来一张报错的截图 先去配置环境变量 C:\Users\lgd\AppData\Local\Programs\Microsoft VS Code\bin的后面配置 ；%SystemRoot%\system32;...补充知识：vue npm run serve报错Cannot find module ‘eslint-plugin
详解Vue项目在其他电脑npm run dev运行报错的解决方法
10-17
在进行Vue项目开发时，我们经常会遇到在不同电脑上运行项目时出现各种问题，尤其是使用npm run dev命令启动项目时可能会遇到的问题。本文将详细探讨这些常见的错误以及解决方法，以帮助开发者更顺利地在不同的环境中...
vue-cli webpack项目npm run dev启动过程
weixin_30703911的博客
07-27 877
前言 通过vue init webpack和npm install命令初始化项目后，执行npm run dev就打开了网站http://localhost:8080。初学者不知道index.html、App.vue、main.js是如何粘在一起的，这里简单说明一下。 启动过程 1.npm run dev npm run XXX是执行配置在package.json中的脚本，比如： ...
npm run serve与npm run dev
weixin_41464845的博客
02-18 269
npm run serve与npm run dev 1、查看package.json文件-》找到scripts 在运行Vue项目的时候，npm run serve和npm run dev的区别就在于vue-cli脚手架的版本，具体情况还是要根据项目的实际情况来处理。
npm run dev 和 npm run serve
qq_44075328的博客
06-01 7258
当你在开发模式下运行应用程序时，这个命令会编译和打包应用程序的代码，并启动一个本地开发服务器，以便你可以在浏览器中预览应用程序并进行调试。当你在开发模式下运行应用程序时，这个命令会编译和打包应用程序的代码，并启动一个本地开发服务器，以便你可以在浏览器中预览应用程序并进行调试。在这个配置中，"serve" 命令会运行 "react-scripts start" 或 "ng serve" 命令，该命令会启动本地开发服务器。在这个配置中，"dev" 命令会运行 "nuxt" 命令，该命令会启动本地开发服务器。
vue执行配置选项npm run serve的本质
pulledup的博客
09-14 1万+
npm run serve、npm run build等“调试运行脚本”：仅仅是Vue默认在内部做了1个“命令行”封装而已！以包配置文件（package.json）的形式与用户交互。打开“工程”下的node包依赖路径下的“可执行脚本”目录：node_modules\bin。
从零开始搭建vue项目 （晋级篇） npm run dev npm run build
热门推荐
似水流年，举重若轻
11-24 1万+
目标：用上之前开发过的所有vue项目中精华的部分。 分几大块搭建。
npm run serve
qq_36349264的博客
05-17 3891
npm run serve
vue是什么_Vue：npm run serve 到底做了什么？
weixin_39555179的博客
11-27 7840
前言在 vue-cli2或者 vue-cli3 中，当我们创建好一个项目，我们要通过 npm run dev(vue-cli2的命令，vue-cli3之后用npm run serve，原理都一样，只不过是换了一下名字而已)运行一个项目。或者通过 npm run build 打包一个项目。那么问题来了，当我们在命令框中输入这两个命令的时候：这背后到底是做了什么是谁帮我们做的这些事准备工作首先我们先来...
Vue中npm run dev 和 npm run serve区别
07-29
在Vue中，`npm run dev`和`npm run serve`是两个常用的命令，它们的区别如下： 1. `npm run dev`：这个命令是在开发环境下运行Vue应用。它会启动一个开发服务器，并在代码发生变化时自动重新构建和刷新页面。这个命令通常用于开发阶段，方便开发人员实时预览和调试应用。 2. `npm run serve`：这个命令也是在开发环境下运行Vue应用，与`npm run dev`相似。不过，与`npm run dev`不同的是，`npm run serve`命令不会执行额外的构建步骤，而是直接从已经构建好的文件中提供静态服务。这个命令适用于在开发阶段中，希望查看最终构建结果或者与其他后端服务集成的情况。 总结起来，`npm run dev`会在运行时进行动态构建和热更新，而`npm run serve`则是直接提供已经构建好的静态资源。在大多数情况下，你可以使用其中任意一个进行开发，具体使用哪个取决于你的需求和偏好。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黛琳ghz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值