vue项目中npm run dev和npm run serve的区别分析

在前端项目开发过程中,我们经常会遇到需要使用 npm run dev 或者 npm run serve 命令来启动项目,这也是启动项目的命令,但是有时候运行 npm run serve 会报错, 运行 npm run dev 时会报错。正常运行,那么两者有什么区别呢?

什么是 npm

要了解两者的区别,首先要了解这两个命令的含义,即两个命令运行时会发生什么。

首先让我们看看 npm

npm其实是nodejs官方提供的包管理平台,npm提供了一个命令行工具npm-cli,我们在使用npm命令的时候,其实是通过node运行了一个名为npm-cli.js的脚本

npm 安装命令

构建项目时,通过 npm install 命令,会在项目目录下生成一个名为 node_modules 的文件夹

image.png

主要用来存放包管理工具下载安装的包的文件夹,可以理解为项目所依赖的外部模块的缓存。比如elementui、echarts等一些组件库,通过npm i安装后会被下载复制到node_modules文件夹中。

我们在 npm 中也涉及到很多命令。接下来,我们来解释一下 npm run 命令。

npm run ×××命令的运行原理

我们知道我们可以使用 npm run serve 和 npm run dev 启动项目,并且可以使用 npm run build 命令打包项目,那么运行 npm run 会发生什么?

在项目目录下,我们可以看到一个名为 package.json 的文件,它是对项目和模块包的描述。在 package.json 文件中,有一个脚本字段

 // 运行 npm run serve 的 scripts 字段  
 “脚本”:{  
 “服务”:“vue-cli-服务服务”,  
 "build" : "vue-cli-service build" ,  
 “lint”:“vue-cli-service lint”  
 } ,  
 复制代码 //运行npm run dev的scripts字段  
 “脚本”:{  
 "dev" : "vue-cli-service 服务" ,  
 "build" : "vue-cli-service build" ,  
 "lint" : "vue-cli-service lint" ,  
 "webpack" : "webpack --version"  
 } ,  
 复制代码

我们可以看到在运行npm run serve命令启动项目的项目中,scripts中有一个serve字段,npm run dev命令中有一个dev字段。这时候我们就可以大致理解了,运行npm run命令的时候,其实就是去package.json文件中的scripts里面找到对应的×××,然后执行对应的命令。如果我们想运行 npm run dev 命令,我们只需要将脚本中的 serve 改为 dev 即可。可以通过 npm run dev 启动项目吗?

image.png

image.png

我们可以看到将serve改为dev后,可以运行npm run dev命令启动项目

但是问题来了,如果我们只有一个字段名的区别,为什么一个启动项目的命令要有serve和dev两种模式呢?

从上面我们可以知道,在运行 npm run serve 的时候,其实是在运行命令 vue-cli-service serve 。在上面我们引用的例子中,我们可以看到,在脚本中,无论是serve还是dev对应的命令都是vue-cli-service serve,那么dev和serve有什么区别呢?

通过我的Simple百度我苦苦搜索,发现在vue-cli2.0中,dev字段的命令是

 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  
 复制代码

 "serve": "vue-cli-service serve",  
 复制代码

只在vue-cli3.0中使用过,所以虽然我们可以通过改变serve的字段名来改变npm run命令,但是在使用的时候,npm run dev和npm run serve本质上是运行不同版本的vue-cli脚本启动下的项目。

补充

从上面我们可以知道,当 npm run serve 是运行命令 vue-cli-service serve 时,为什么不运行命令 vue-cli-service serve 而不是运行 npm run serve 呢?

所以我大胆秉承科学真理的精神,运行命令 vue-cli-service serve

image.png

然后我们可以发现控制台报错,无法识别vue-cli-service。那么,这个命令是如何工作的呢?这时候我们可以看到命令 webpack-dev-server --inline --run by npm run dev -progress --config build/webpack.dev.conf.js,一个js文件,会npm run serve也运行一个脚本,所以我在项目中全局搜索vue-cli-service,发现在node_modules文件文件夹的.bin文件下找到了一个名为vue-cli-service的文件

 #!/bin/sh  
 basedir=$( 目录名 " $(echo " $0 " | sed -e 's,\\,/,g') ")  
  
 案例`uname`在  
 *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;  
 经社理事会  
  
 if [ -x " $basedir /node" ];然后  
 "$basedir /node" "$basedir /../@vue/cli-service/bin/vue-cli-service.js" "[ [电子邮件保护]](/cdn-cgi/l/email-protection) "  
 转=$?  
 别的  
 节点 "$basedir /../@vue/cli-service/bin/vue-cli-service.js" "[ [电子邮件保护]](/cdn-cgi/l/email-protection) "  
 转=$?  
 菲  
 退出 $ret  
  
 复制代码

在这个脚本下,我们可以找到一个命令节点“$basedir/../@vue/cli-service/bin/vue-cli-service.js”,那么到这里,基本可以确认了,虽然不能运行vue直接-cli-service,但是我们运行npm的时候会去node_modules/.bin找到vue-cli-service文件,然后把文件作为脚本运行。

参考文章

“node_modules”文件夹的用途是什么?

npm命令详解——掘金(juejin.cn)

Vue 让你了解 npm run dev 和 npm run serve 的区别——掘金(juejin.cn)

面试官:运行 npm run xxx 会发生什么? ——掘金(绝进.cn)

版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接: https://homecpp.art/1204/6411/0928

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/12310/08290412

posted @   哈哈哈来了啊啊啊  阅读(9766)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示