Vue：npm run serve 到底做了什么？

前言

在 vue-cli2或者 vue-cli3 中，当我们创建好一个项目，我们要通过 npm run dev（vue-cli2的命令，vue-cli3之后用npm run serve，原理都一样，只不过是换了一下名字而已）运行一个项目。或者通过 npm run build 打包一个项目。那么问题来了，当我们在命令框中输入这两个命令的时候：

1. 这背后到底是做了什么
2. 是谁帮我们做的这些事

准备工作

首先我们先来创建一个vue项目，这里需要说明一下，我们也可以不用非得创建一个vue的项目，创建一个文件夹，然后在里面创建几个js文件，也可以。不过我们现在都对vue比较熟悉，我们就以vue项目为例。

好，先来创建一个vue项目，在命令行中输入命令：vue create test-vue

我的vue-cli版本是4.4.6，所以要通过这行命令创建。其它版本的可以查一下官方文档。这里不过多解释。

当创建好之后出现以下提示，说明项目已经创建好了

用vscode打开项目，看一下文件目录：

这是vue-cli这个脚手架工具帮我们创建是默认目录。

这背后到底是做了什么

我们在命令行中输入命令：

npm run serve

看一下运行成功之后的提示信息：

有没有小伙伴想过这样的问题：为什么是运行npm run serve命令呢，这些命令在哪里呢，我该怎么记住这些命令。

其实这个命令不需要记这个命令，我们只要记住 npm run就好，当我们创建完项目之后可以看到一个 package.json文件。看一下主要的内容：文件内容过多，我们主要看一下 script标签的内容

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

聪明的小朋友可能已经明白了，会不会我们 npm run serve 就是执行的的第一行吧。其实是对的，当我们输入 npm run 之后，就是相当于运行 vue-cli-service serve 这行指令。这个名称可以改，我们改成 dev 之后，就是 npm run dev。不知小伙伴是否明白了。

是谁帮我们做的这些事

那么又是谁帮我们把项目运行起来的呢？我们继续看：当输入 npm run serve回车执行的时候，npm会在项目的目录下找到 node_modules文件夹下的 .bin目录，把此目录添到系统的path环境变量下，执行完之后再把环境变量下的目录删除。打开这个文件夹可以看到一个文件：vue-cli-service这其实是一个 link 快捷方式，它指向 @ vue/cli-service/bin/vue-cli-service.js这个文件。

npm run serve 就是在运行这个vue-cli-service.js脚本文件。看一下里面的一些代码：

const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
// ....省略了一些代码
const command = args._[0]
service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

这里其实就是开启了一个node服务。

总结：

1. 当我们在命令行中输入 npm run xxxx的时候，其实就是执行 package.json文件里的 scripts里的某个命令
2. npm run serve命令之后，就是开启了一个服务来运行我们的项目，这是 WebpackDevServer开启的服务