npm run serve 都发生了什么

469 阅读1分钟

1.打开vue项目

我们运行vue项目时,常用的的命令是 npm run serve ,然后项目就跑起来了。但是你知道这里面都发生了什么事情吗?

image.png 我们运行npm run serve 可以看到命令行中出现了vue-cli-service serve这条命令,我们用IDE全局搜索一下这行命令,可以看到它是存在package.json文件中

image.png

image.png

此时,我们可以确认,运行,npm run serve 时,我们执行的是vue-cli-service serve

2.vue-cli-service serve后面又做了哪些事呢?

我们再顺藤摸瓜,继续在全局搜索vue-cli-service,果然又有新的发现,有一个文件里面包含了vue-cli-service命令,且该文件名也叫vue-cli-service

image.png

我们查看到该文件的路径在node_modules.bin\vue-cli-service,我们由此又能推断出,执行到了这里。

3.node_modules.bin\vue-cli-service之后呢?

vue-cli-service

`#!/bin/sh basedir=(dirname"(dirname "(echo "$0" | sed -e 's,\,/,g')")

case uname in CYGWIN|MINGW|MSYS) basedir=cygpath -w "$basedir";; esac

if [ -x "basedir/node"];thenexec"basedir/node" ]; then exec "basedir/node" "basedir/../@vue/cliservice/bin/vuecliservice.js""basedir/../@vue/cli-service/bin/vue-cli-service.js" "@" else exec node "basedir/../@vue/cliservice/bin/vuecliservice.js""basedir/../@vue/cli-service/bin/vue-cli-service.js" "@" fi `

我们进入这个文件夹,看到这两行关键代码,指向了同一个路径,"$basedir/../@vue/cli-service/bin/vue-cli-service.js",我们打开这个路径看看。

image.png 原来到了这里了。

4.小弟才疏学浅,后面的就由各位大佬们帮忙补充了