vue在npm run dev 后为什么就在localhost运行了

Question

vue在npm run dev 后为什么就在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

当前分析环境:windows 10 专业版1809

以vue-cli 3的配置（修改过）为例 （vue-cli 2的类似）

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

当执行npm run dev后

npm 会去package.json 里边的 scripts 字段里找dev这个命令

如果配置了的话，就会执行对应的配置 vue-cli-service serve

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这个核心模块

这时就出现一个调用链条npm run dev->vue-cli-service serve->webpack-dev-server->express->node->http
（vue-cli 2的配置少了vue-cli-service 这层封装）

所以得出结论：vue在npm run dev 后为什么就在localhost运行了? 这个问题的实质是用node调用http模块启用了一个web服务器。

Answer 3

webpack-dev-server临时在本地开启一个node服务