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

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

求教 在这个过程中vue做了什么 以及它的原理

回答:

首先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 ,拉下来就能执行你想做的命令,挺好玩,感觉有帮助的话请点赞 谢谢

回答:

当前分析环境: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服务器底层调用的实际是nodehttp这个核心模块

这时就出现一个调用链条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服务器。

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注