当前位置: 首页 > news >正文

一分钟理解npm run dev 和 npm run serve

        前端开发过程中运行Vue项目的时候,有时候使用npm run serve命令可以启动项目,有时候却会报错;有时候使用npm run dev命令可以启动项目,有时候却也会报错。是什么原因造成这种情况呢,原因在于Vue脚手架版本的问题,也可以理解为执行配置的脚本问题,有的脚手架版本支持npm run serve命令启动项目,有的脚手架版本却支持npm run dev命令启动项目。
        npm run dev     是vue-cli2.0版本使用的
        npm run serve  是vue-cli3.0版本使用的

vue-cli2.0: 

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","build": "node build/build.js"
}

 vue-cli3.0:

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

可以把这个 npm run serve 当做是 npm run package.json 里面的scripts的value。
比如,npm run serve 实际运行的是 vue-cli-service serve;而如果你想使用npm run dev 的话,只需把 “serve” 修改为 “dev” 就行。

npm run xxx 中的 xxx 可以理解为键值对的 key,实际上 run 的是在 package.json 里面 scripts 配置的 value;

比如,npm run serve 实际运行的是 vue-cli-service serve;

而放在 3.0 以前运行的则是 node build/dev-server.js 文件;

小结
        npm run xxx,并不是你想运行就运行的,只有在 package.json脚本中对scripts 配置了,才可以进行 run 的,所以不是所有的项目都能 npm run dev/serve。
        要了解这些命令做了什么,就要去scripts中看具体执行的是什么代码。这里就像是一些命令的快捷方式,免去每次都要输入很长的的命令(比如 serve 那行)一般项目都会有 build, dev, serve 等,所以起名,最起码要从名字上基本能看出来是干什么的。

相关文章:

一分钟理解npm run dev 和 npm run serve

前端开发过程中运行Vue项目的时候,有时候使用npm run serve命令可以启动项目,有时候却会报错;有时候使用npm run dev命令可以启动项目,有时候却也会报错。是什么原因造成这种情况呢,原因在于Vue脚手架版本的问题&#…...

HTTP 协议请求头 If-Match、If-None-Match 和 ETag

概述 在 HTTP 协议中,请求头 If-Match、If-None-Match、If-Modified-Since、If-Unmodified-Since、If-Range 主要是为了解决浏览器缓存数据而定义的请求头标准,按照协议规范正确的判断和使用这几个请求头,可以更精准的处理浏览器缓存&#x…...

DAY42 1049.最后一块石头的重量II + 494.目标和 + 474.一和零

1049.最后一块石头的重量II 题目要求&#xff1a;有一堆石头&#xff0c;每块石头的重量都是正整数。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结果如下&#xff1a; …...

uniapp原生插件之安卓华为统一扫码HMS Scan Kit

插件介绍 华为统一扫码服务&#xff08;Scan Kit&#xff09;提供便捷的条形码和二维码扫描、解析、生成能力 插件地址 安卓华为统一扫码HMS Scan Kit - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档 详细使用文档 插件申请权限 android.permi…...

数模国赛——多波束测线问题模型建立研究分析

第一次参加数模国赛&#xff0c;太菜了~~~~意难平 问题一 画出与测线方向垂直的平面和海底坡面的交线构成一条与水平面夹角为&#x1d400;的斜线的情况下的示意图进行分析&#xff0c;将覆盖宽度分为左覆盖宽度和右覆盖宽度&#xff0c;求出它们与海水深度和&#x1d400;、…...

[AUTOSAR][诊断管理][ECU][$37] 请求退出传输。终止数据传输的(上传/下载)

文章目录 一、简介二、服务请求报文定义肯定响应支持的NRC三、示例流程Step 1:Step 2:报文示例:Step 1:请求RequestDownload(0x34)服务Step 2:请求TransferData (0x36)服务,传输数据Step 3:请求RequestTransferExit(0x37)服务总结:三、示例代码37_req_transfer_e…...

vue+canvas实现横跨整个页面的动态的波浪线(贝塞尔曲线)

本来写这个特效 我打算用css实现的,结果是一波三折,我太难了,最终没能用css实现,转战了canvas来实现。来吧先看效果图 当然这个图的波浪高度、频率、位置、速度都是可调的,请根据自己的需求调整,如果你讲波浪什么的调大一下 还有有摆动的效果哦。 以下是完整代码 <…...

LeetCode算法题解|​ 669. 修剪二叉搜索树​、108. 将有序数组转换为二叉搜索树、​538. 把二叉搜索树转换为累加树​

一、LeetCode 669. 修剪二叉搜索树​ 题目链接&#xff1a;669. 修剪二叉搜索树 题目描述&#xff1a; 给你二叉搜索树的根节点 root &#xff0c;同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[low, high]中。修剪树 不应该 改变…...

直播界很火的无线领夹麦克风快充方案 Type-C接口 PD快充+无线麦克风可同时进行

当前市场上流行一款很火的直播神器&#xff0c;无线领夹麦克风&#xff08;MIC&#xff09;&#xff0c;应用于网红直播&#xff0c;网课教学&#xff0c;采访录音&#xff0c;视频录制&#xff0c;视频会议等等场景。 麦克风对我们来说并不陌生&#xff0c;而且品类有很多。随…...

Jmeter 汉化中文语言

找到 bin -> jmeter.propertise 修改参数&#xff1a;languageen --> languagazh_CN OK&#xff01;...

centos9 stream 下 rabbitmq高可用集群搭建及使用

RabbitMQ是一种常用的消息队列系统&#xff0c;可以快速搭建一个高可用的集群环境&#xff0c;以提高系统的弹性和可靠性。下面是搭建RabbitMQ集群的步骤&#xff1a; 基于centos9 stream系统 1. 安装Erlang和RabbitMQ 首先需要在所有节点上安装Erlang和RabbitMQ。建议使用官…...

代码随想录算法训练营第10天|232. 用栈实现队列 225. 用队列实现栈

JAVA代码编写 232. 用栈实现队列 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xff1a; 实现 MyQueue 类&#xff1a; void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除…...

线上Kafka集群如何调整消息存储时间

这里是weihubeats,觉得文章不错可以关注公众号小奏技术&#xff0c;文章首发。拒绝营销号&#xff0c;拒绝标题党 Kafka版本 kafka_2.13-3.5.0 背景 Kafka 默认消息存储时间为7天&#xff0c;实际线上的业务使用Kafka更多的是一些数据统计之类的业务&#xff0c;大多是朝生夕…...

[迁移学习]DA-DETR基于信息融合的自适应检测模型

原文标题为&#xff1a;DA-DETR: Domain Adaptive Detection Transformer with Information Fusion&#xff1b;发表于CVPR2023 一、概述 本文所描述的模型基于DETR&#xff0c;DETR网络是一种基于Transformer的目标检测网络&#xff0c;详细原理可以参见往期文章&#xff1a;…...

【MATLAB】全网唯一的13种信号分解+FFT傅里叶频谱变换联合算法全家桶

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 大家吃一顿火锅的价格便可以拥有13种信号分解FFT傅里叶频谱变换联合算法&#xff0c;绝对不亏&#xff0c;知识付费是现今时代的趋势&#xff0c;而且都是我精心制作的教程&#xff0c;有问题可随时反馈~也可单独获取某一…...

Nginx安装与配置

1.下载安装包 官网下载地址&#xff1a;nginx: download 可以先将安装包下载到本地再传到服务器&#xff0c;或者直接用wget命令将安装包下载到服务器&#xff0c;这里我们直接将安装包下载到服务器上。未安装wget命令的需要先安装wget&#xff0c;yum install -y wget [root…...

linux笔记总结-基本命令

参考&#xff1a; 1.Linux 和Windows比 比较 &#xff08;了解&#xff09; 1. 记住一句经典的话&#xff1a;在 Linux 世界里&#xff0c;一切皆文件 2. Linux目录结构 /lib • 系统开机所需要最基本的动态连接共享库&#xff0c;其作用类似于Windows里的DLL文件。几 乎所有…...

[PHP]禅道项目管理软件ZenTaoPMS源码包 v16.4

禅道项目管理软件ZenTaoPMS一键安装包是一款国产的开源项目管理软件。它集产品管理、项目管理、质量管理、文档管理、组织管理和事务管理于一体&#xff0c;是一款专业的研发项目管理软件&#xff0c;完整地覆盖了项目管理的核心流程。注重实效的管理思想&#xff0c;合理的软件…...

Required String parameter ‘name‘ is not present

[org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter name is not present] 服务端有参数name&#xff0c;客户端没有传上来...

路由器基础(五): OSPF原理与配置

开放式最短路径优先 (Open Shortest Path First,OSPF) 是一个内部网关协议 (Interior Gateway Protocol,IGP),用于在单一自治系统(Autonomous System,AS) 内决策路由。OSPF 适合小型、中型、较大规模网络。OSPF 采用Dijkstra的最短路径优先算法 (Shortest Pat…...

Claude浏览器扩展漏洞允许通过任意网站实现零点击XSS提示注入

网络安全研究人员披露了Anthropic公司Claude谷歌浏览器扩展中存在的一个漏洞&#xff0c;攻击者只需诱使用户访问特定网页即可触发恶意提示注入。漏洞原理分析Koi Security研究员Oren Yomtov在提供给The Hacker News的报告中指出&#xff1a;"该漏洞允许任何网站静默地向该…...

新手避坑指南:用Prometheus+PX4+ROS在Gazebo里复现无人机追踪小车(保姆级流程)

新手避坑指南&#xff1a;用PrometheusPX4ROS在Gazebo里复现无人机追踪小车&#xff08;保姆级流程&#xff09; 当第一次接触无人机仿真开发时&#xff0c;很多人会被复杂的工具链和晦涩的错误信息劝退。本文将手把手带你完成从零搭建仿真环境到实现视觉追踪的全过程&#xff…...

SWF逆向工程标准化文档:JPEXS Free Flash Decompiler实施指南

SWF逆向工程标准化文档&#xff1a;JPEXS Free Flash Decompiler实施指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款强大的SWF逆向工程工具&…...

2026最权威一键生成论文工具榜单:这些被高校和导师悄悄推荐的软件你用了吗

一键生成论文工具正成为学术研究的重要助力&#xff0c;其高效性与专业性在近年来得到广泛认可。依托权威检测平台数据、高校实测反馈及用户真实评价&#xff0c;这些工具已逐步成为科研工作者和学生群体的得力助手。本文将盘点2026年最受高校和导师推荐的一键生成论文软件&…...

Beekeeper Studio:现代跨平台数据库管理工具的技术架构与实战应用

Beekeeper Studio&#xff1a;现代跨平台数据库管理工具的技术架构与实战应用 【免费下载链接】beekeeper-studio beekeeper-studio/beekeeper-studio: Beekeeper Studio 是一款开源的跨平台数据库客户端工具&#xff0c;支持多种数据库&#xff08;如MySQL, PostgreSQL, SQLit…...

Apache Doris 存储与查询优化实战:从架构设计到性能调优的完整指南

1. Apache Doris 架构设计精要 第一次接触Apache Doris时&#xff0c;我被它简洁的架构设计惊艳到了。这个MPP架构的分析型数据库&#xff0c;用计算存储分离的设计思路&#xff0c;把复杂的大数据分析变得像查普通MySQL表一样简单。FE&#xff08;Frontend&#xff09;和BE&am…...

Win11Debloat:终极Windows系统清理工具,一键提升电脑性能的完整指南

Win11Debloat&#xff1a;终极Windows系统清理工具&#xff0c;一键提升电脑性能的完整指南 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执…...

Gradio项目快速公网演示:除了share=True,你还有这几种轻量级内网穿透方案

Gradio项目快速公网演示&#xff1a;5种轻量级内网穿透方案横向评测 当你开发了一个酷炫的机器学习模型演示&#xff0c;或是精心设计的数据可视化界面&#xff0c;最迫切的需求往往是如何快速分享给同事或客户。Gradio的shareTrue参数可能是大多数开发者首先想到的方案&#x…...

开源动作捕捉新纪元:FreeMoCap低成本解决方案全解析

开源动作捕捉新纪元&#xff1a;FreeMoCap低成本解决方案全解析 【免费下载链接】freemocap Free Motion Capture for Everyone &#x1f480;✨ 项目地址: https://gitcode.com/GitHub_Trending/fr/freemocap 问题&#xff1a;动作捕捉技术的高门槛困境 在数字内容创作…...

ffmpegGUI:让FFmpeg视频处理变得简单的跨平台桌面工具

ffmpegGUI&#xff1a;让FFmpeg视频处理变得简单的跨平台桌面工具 【免费下载链接】ffmpegGUI ffmpeg GUI 项目地址: https://gitcode.com/gh_mirrors/ff/ffmpegGUI ffmpegGUI是一款基于FFmpeg的开源图形界面工具&#xff0c;它将命令行操作转化为直观的可视化交互&…...