vue项目中npm run dev和npm run serve的区别分析

在前端项目开发过程中，我们经常会遇到需要使用 npm run dev 或者 npm run serve 命令来启动项目，这也是启动项目的命令，但是有时候运行 npm run serve 会报错, 运行 npm run dev 时会报错。正常运行，那么两者有什么区别呢？

什么是 npm

要了解两者的区别，首先要了解这两个命令的含义，即两个命令运行时会发生什么。

首先让我们看看 npm

npm其实是nodejs官方提供的包管理平台，npm提供了一个命令行工具npm-cli，我们在使用npm命令的时候，其实是通过node运行了一个名为npm-cli.js的脚本

npm 安装命令

构建项目时，通过 npm install 命令，会在项目目录下生成一个名为 node_modules 的文件夹

主要用来存放包管理工具下载安装的包的文件夹，可以理解为项目所依赖的外部模块的缓存。比如elementui、echarts等一些组件库，通过npm i安装后会被下载复制到node_modules文件夹中。

我们在 npm 中也涉及到很多命令。接下来，我们来解释一下 npm run 命令。

npm run ×××命令的运行原理

我们知道我们可以使用 npm run serve 和 npm run dev 启动项目，并且可以使用 npm run build 命令打包项目，那么运行 npm run 会发生什么？

在项目目录下，我们可以看到一个名为 package.json 的文件，它是对项目和模块包的描述。在 package.json 文件中，有一个脚本字段

 // 运行 npm run serve 的 scripts 字段  
 “脚本”：{  
 “服务”：“vue-cli-服务服务”，  
 "build" : "vue-cli-service build" ,  
 “lint”：“vue-cli-service lint”  
 } ,  
 复制代码 //运行npm run dev的scripts字段  
 “脚本”：{  
 "dev" : "vue-cli-service 服务" ,  
 "build" : "vue-cli-service build" ,  
 "lint" : "vue-cli-service lint" ,  
 "webpack" : "webpack --version"  
 } ,  
 复制代码

我们可以看到在运行npm run serve命令启动项目的项目中，scripts中有一个serve字段，npm run dev命令中有一个dev字段。这时候我们就可以大致理解了，运行npm run命令的时候，其实就是去package.json文件中的scripts里面找到对应的×××，然后执行对应的命令。如果我们想运行 npm run dev 命令，我们只需要将脚本中的 serve 改为 dev 即可。可以通过 npm run dev 启动项目吗？

我们可以看到将serve改为dev后，可以运行npm run dev命令启动项目

但是问题来了，如果我们只有一个字段名的区别，为什么一个启动项目的命令要有serve和dev两种模式呢？

从上面我们可以知道，在运行 npm run serve 的时候，其实是在运行命令 vue-cli-service serve 。在上面我们引用的例子中，我们可以看到，在脚本中，无论是serve还是dev对应的命令都是vue-cli-service serve，那么dev和serve有什么区别呢？

通过我的Simple百度我苦苦搜索，发现在vue-cli2.0中，dev字段的命令是

 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  
 复制代码

和

 "serve": "vue-cli-service serve",  
 复制代码

只在vue-cli3.0中使用过，所以虽然我们可以通过改变serve的字段名来改变npm run命令，但是在使用的时候，npm run dev和npm run serve本质上是运行不同版本的vue-cli脚本启动下的项目。

补充

从上面我们可以知道，当 npm run serve 是运行命令 vue-cli-service serve 时，为什么不运行命令 vue-cli-service serve 而不是运行 npm run serve 呢？

所以我大胆秉承科学真理的精神，运行命令 vue-cli-service serve

然后我们可以发现控制台报错，无法识别vue-cli-service。那么，这个命令是如何工作的呢？这时候我们可以看到命令 webpack-dev-server --inline --run by npm run dev -progress --config build/webpack.dev.conf.js，一个js文件，会npm run serve也运行一个脚本，所以我在项目中全局搜索vue-cli-service，发现在node_modules文件文件夹的.bin文件下找到了一个名为vue-cli-service的文件

 #!/bin/sh  
 basedir=$( 目录名 " $(echo " $0 " | sed -e 's,\\,/,g') ")  
  
 案例`uname`在  
 *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;  
 经社理事会  
  
 if [ -x " $basedir /node" ];然后  
 "$basedir /node" "$basedir /../@vue/cli-service/bin/vue-cli-service.js" "[ [电子邮件保护]](/cdn-cgi/l/email-protection) "  
 转=$？  
 别的  
 节点 "$basedir /../@vue/cli-service/bin/vue-cli-service.js" "[ [电子邮件保护]](/cdn-cgi/l/email-protection) "  
 转=$？  
 菲  
 退出 $ret  
  
 复制代码

在这个脚本下，我们可以找到一个命令节点“$basedir/../@vue/cli-service/bin/vue-cli-service.js”，那么到这里，基本可以确认了，虽然不能运行vue直接-cli-service，但是我们运行npm的时候会去node_modules/.bin找到vue-cli-service文件，然后把文件作为脚本运行。

参考文章

“node_modules”文件夹的用途是什么？

npm命令详解——掘金（juejin.cn）

Vue 让你了解 npm run dev 和 npm run serve 的区别——掘金（juejin.cn）

面试官：运行 npm run xxx 会发生什么？ ——掘金（绝进.cn）

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接： https://homecpp.art/1204/6411/0928

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/12310/08290412