一分钟理解npm run dev 和 npm run serve

        前端开发过程中运行Vue项目的时候，有时候使用npm run serve命令可以启动项目，有时候却会报错；有时候使用npm run dev命令可以启动项目，有时候却也会报错。是什么原因造成这种情况呢，原因在于Vue脚手架版本的问题，也可以理解为执行配置的脚本问题，有的脚手架版本支持npm run serve命令启动项目，有的脚手架版本却支持npm run dev命令启动项目。
        npm run dev     是vue–cli2.0版本使用的
        npm run serve  是vue–cli3.0版本使用的

vue–cli2.0： 

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
}

 vue–cli3.0：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

可以把这个 npm run serve 当做是 npm run package.json 里面的scripts的value。
比如，npm run serve 实际运行的是 vue–cli–service serve；而如果你想使用npm run dev 的话，只需把 “serve” 修改为 “dev” 就行。

npm run xxx 中的 xxx 可以理解为键值对的 key，实际上 run 的是在 package.json 里面 scripts 配置的 value；

比如，npm run serve 实际运行的是 vue–cli–service serve；

而放在 3.0 以前运行的则是 node build/dev-server.js 文件；

小结
        npm run xxx，并不是你想运行就运行的，只有在 package.json脚本中对scripts 配置了，才可以进行 run 的，所以不是所有的项目都能 npm run dev/serve。
        要了解这些命令做了什么，就要去scripts中看具体执行的是什么代码。这里就像是一些命令的快捷方式，免去每次都要输入很长的的命令（比如 serve 那行）一般项目都会有 build, dev, serve 等，所以起名，最起码要从名字上基本能看出来是干什么的。

代码007普通

打赏 收藏 海报 链接