跪求！vue在npm run dev 后为什么就在localhost运行了求解答！

Question

vue在npmrundev后为什么就在localhost运行了求教在这个过程中vue做了什么以及它的原理

Answer 1

首先run是run的package.json里边的scripts这个命令
里边有对应的执行的文件，那你就去找这个文件嘛，比如我的是build/webpack.dev.conf.js
然后这个里边有个webpack的配置文件调用webpackConfig
然后这个里边又有一个webpack.base.conf.js的引用
最后这个文件里边引用的是./src/main.js
所以呢就打开了我们的入口文件
这是找文件的，同理还有一些其他的，
比如还会看到一些webpack-dev-server--inline--progress--config这个被调用的命令启动了webpack-dev-server这个服务器webpack的一些命令和参数这个东西咱们自己都可以写的，然后发到npm，拉下来就能执行你想做的命令，挺好玩，感觉有帮助的话请点赞谢谢
                            

Answer 2

当前分析环境:windows10专业版1809
以vue-cli3的配置（修改过）为例（vue-cli2的类似）
"scripts":{
"dev":"vue-cli-serviceserve",
"serve":"vue-cli-serviceserve",
"build":"vue-cli-servicebuild",
"lint":"vue-cli-servicelint"
}
当执行npmrundev后
npm会去package.json里边的scripts字段里找dev这个命令
如果配置了的话，就会执行对应的配置vue-cli-serviceserve
vue-cli-service也是一个命令，当npm的脚本执行的时候就会去执行当前项目目录下的node_modules/.bin/vue-cli-service.cmd这个文件(可自行查看源码)
vue-cli-service.cmd这个文件又会用node执行@vue\cli-service\bin\vue-cli-service.js文件(可自行查看源码)
vue-cli-service.js这个文件里加载着(两层加载)对应的命令处理文件（@vue\cli-service\bin\commands\serve.js文件写着可执行的命令）
然后你就会发现它加载了webpack-dev-server这个包（也就是说vue-cli-service是基于这个包实现的）(可自行查看源码)
然后再看webpack-dev-server这个包，它又是基于express实现的
express又是一个node框架，它起的web服务器底层调用的实际是node的http这个核心模块
这时就出现一个调用链条npmrundev->vue-cli-serviceserve->webpack-dev-server->express->node->http（vue-cli2的配置少了vue-cli-service这层封装）
所以得出结论：vue在npmrundev后为什么就在localhost运行了?这个问题的实质是用node调用http模块启用了一个web服务器。