我们在前端项目开发的过程中，经常碰到需要使用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 install命令
在构建项目时，通过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文件中，有一个scripts的字段
// 运行npm run serve的scripts字段
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
//运行npm run dev的scripts字段
"scripts": {
"dev": "vue-cli-service serve",
"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命令的话，只需要把scripts中的serve改成dev就能通过npm run dev来启动项目呢
我们可以看到，确实将serve改成dev之后，我们运行npm run dev命令可以启动项目
可是问题来了，如果我们只是一个字段名的区别，为什么一个启动项目的命令，要有serve和dev两种方式呢？
通过上面，我们可以知道，运行npm run serve的时候，实际是运行vue-cli-service serve这条命令，在我们上面举出的例子中我们可以看到scripts中，不管serve还是dev对应的命令都是vue-cli-service serve，那么dev和serve到底区别在哪里呢？
经过我的简单百度努力寻找，发现了在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,那么，这个命令到底是怎么运行的呢，这时候我们可以看到npm run dev运行的命令webpack-dev-server --inline --progress --config build/webpack.dev.conf.js,一个js文件，那么npm run serve会不会也是运行一个脚本呢，因此我在项目全局搜索了一下vue-cli-service，发现在node_modules文件夹的.bin文件下发现了一个名为vue-cli-service的文件
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
ret=$?
else
node "$basedir/../@vue/cli-service/bin/vue-cli-service.js" "$@"
ret=$?
fi
exit $ret
在这个脚本下，我们可以发现一条命令node "$basedir/../@vue/cli-service/bin/vue-cli-service.js"，那到这里，我们基本可以确认，虽然不能直接运行vue-cli-service，但是我们在npm run的时候，会前往node_modules/.bin下找到vue-cli-service文件，然后将该文件作为脚本运行。
参考文章
“node_modules"文件夹的用途是什么? - IT屋-程序员软件开发技术分享社区 (it1352.com)
