（转载）vue项目npm run dev 发生了啥？

Posted 2023-05-04

参考技术A 以vue cli 3配置为例，
"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服务器。

webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

详解Vue项目在其他电脑npm run dev运行报错的解决方法

参考技术A 一个
Vue
项目从一台电脑上传到
github
上之后，再另外一台电脑上
git
clone
。并使用
npm
run
dev
或
npm
run
start
发生以下报错的解决方法。
报错原因
缺少
node_modules
里面的依赖。在项目目录下使用
npm
install
然后再
npm
run
dev。
如果在这一步当中，
npm
install
执行的过程中，处于一直卡顿的状态。说明网络状况不佳。建议使用
cnpm
淘宝源。
淘宝源
使用
cnpm
-v
查看是否已经安装
cnpm。如果没有，使用
npm
install
cnpm
-g
--registry=https://registry.npm.taobao.org
命令安装。然后将上面
npm
的步骤命令改成
cnpm
即可。
补充：
默认电脑里已经安装Node.js
下载完别人的VUE项目后，我们执行下载所有依赖npm
install后启动npm
run
dev运行的最后一步经常会报错，
不是缺少依赖模板，就是node_modules版本与本机安装的node和npm版本不一致。
今天遇到的问题就是版本不一致，例如我们的电脑中安装的node版本为6.10.3、npm版本为4.6.1。而项目中的版本为"node":
">=
4.0.0",
"npm":
">=
3.0.0"。
这样运行后终端会报错，无效的指令。
这时解决的方法就是直接删除vue项目中的node_modules，同时修改package.json文件里面的
"engines":

"node":
">=
4.0.0",
"npm":
">=
3.0.0"
,
将"node":
">=
4.0.0","npm":
">=
3.0.0"修改为"node":
">=
6.10.3","npm":
">=
4.6.1"（你电脑中node/npm的版本号）
然后执行npm
install重新下载所有依赖
最后执行npm
run
dev就能成功运行项目了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。