npm scripts中run serve命令详解

已于 2022-02-10 17:26:00 修改
阅读量1.2w 收藏 6
点赞数 3
文章标签： npm vue.js 前端
于 2022-02-10 17:23:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48596281/article/details/122865168
版权

闲来无事，分析npm run serve会发生哪些事情，一分析，发现其中有很大的奥妙。
1.首先npm run serve 会在package.json文件中寻找scripts中的 serve属性（有的可能会是dev属性，根据自己项目结构来）
在这里插入图片描述
2.一看又懵了。vue-cli-service serve又是什么呢？ 其实吧就是等同于去执行node_modules.bin\vue-cli-service文件，这个时候你会发现这个文件中有一行node命令node “ b a s e d i r / . . / @ v u e / c l i − s e r v i c e / b i n / v u e − c l i − s e r v i c e . j s " " basedir/../@vue/cli-service/bin/vue-cli-service.js" " basedir/../@vue/cli−service/bin/vue−cli−service.js""@”
在这里插入图片描述
3.根据目录就会发现其实是执行对应的js文件
在这里插入图片描述
ps：在分析执行路径的过程中，我发现vue-cli3和vue-cli2搭建项目的时候是不一样的。vue-cli2其实用的是webpack-dev-serve插件 。 而vue-cli3是vue-cli-service但其中原理是类似的。

xiangyan_3
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端执行npm run serve，执行到一半卡住的解决办法（全）
码农研究僧的博客
03-20 372
前端执行npm run serve，执行到一半卡住的解决办法
tampermonkey-scripts:篡改脚本
07-24
tampermonkey-scripts 仅在最新版上通过，如果使用其它浏览器必须要保证Chromium版本80+ 使用 ...npm run serve // 或者（输出到dist目录） // npm run dev // 输出到dist目录 npm run build Thanks
npm run dev 与npm run serve的区别
wsrzsfgst的博客
12-20 2588
这个命令的目的通常是启动开发环境，提供一个方便的方式来进行开发，并且可以根据项目的特定需求进行自定义配置。启动一个 webpack-dev-server，该服务器会监听文件的变化并实时重新加载页面，支持热重载（Hot-Reload），方便开发人员在开发过程中进行实时调试和预览。）以及实现方式可能因项目而异，这是一种通用的命名约定，但实际使用时还需要查看项目文档或者配置文件来确定具体的含义和功能。是在开发阶段使用 npm 运行脚本的两种常见命令，它们的区别主要在于脚本的配置和执行方式。
npm run serve 和 npm run dev 的区别
weixin_57633124的博客
05-28 5404
在日常运行vue 项目中 在终端 运行命令有时用到 npm run serve 有时是 npm run dev。 那么，什么时候用到 serve ，什么时候用到 dev 呢？ 他们的区别是什么？ 例如：在vue 项目终端，输入 npm run serve 或者 npm run dev 其中一个的时候 会出现报错，如下： 以上是运行错误提示，然后找到package.json文件，观察标红代码。 我们会发现 npm run serve 代表执行npm run package.json 里面的
vue-cli命令npm run serve 源码解析
大灰狼的小绵羊哥哥的博客
07-31 737
npm run serve 源码解析
浅析npm run serve命令
m0_54850467的博客
03-10 596
本地开发一般通过执行 npm run serve 命令来启动项目，那这行命令到底存在什么魔法？我们来一探究竟。 根据这篇文章思路：使用vue-cli初始化后运行npm run server到底干了什么 得知，npm run serve 实际上会执行 vue-cli-service serve（该文件位于 node_modules.bin ue-cli-service.cmd），查看该文件，发现最终会执行 node vue-cli-service.js serve（该文件位于 node_modules@vue
yarn serve 和 npm run serve 之间比较分析
m0_69057918的博客
06-06 1751
yarn serve 和 npm run serve 之间比较分析
vue执行配置选项npm run serve的本质
pulledup的博客
09-14 1万+
npm run serve、npm run build等“调试运行脚本”：仅仅是Vue默认在内部做了1个“命令行”封装而已！以包配置文件（package.json）的形式与用户交互。打开“工程”下的node包依赖路径下的“可执行脚本”目录：node_modules\bin。
一篇解决全部疑惑，从头到尾实现npm run serve：
qq_46154725的博客
07-28 3266
报错1：npm ERR！code ENOENT npm ERR！ syscall open 报错（新增）：npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve 报错2：Error: Cannot find module ‘xxx’ 报错3：These dependencies were not found: * @/ 报错4：node_modules中的错误 报错5：Error loading vue.config.js.........
npm run serve命令报错
热门推荐
qq_39963867的博客
12-24 1万+
npm run serve运行报错 npm run serve 运行中最常遇到的问题 ERR报错了 npm ERR! code ENOENT npm ERR! syscall open npm ERR! path F:\VUE项目\xinguan\package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open ‘F:\VUE项目\xinguan\package.json’ npm ERR! e
一分钟理解npm run dev 和 npm run serve
Adae_Stevens的博客
11-02 3373
前端开发过程中运行Vue项目的时候，有时候使用npm run serve命令可以启动项目，有时候却会报错；是什么原因造成这种情况呢，原因在于Vue脚手架版本的问题，也可以理解为执行配置的脚本问题，有的脚手架版本支持npm run serve命令启动项目，有的脚手架版本却支持npm run dev命令启动项目。npm run xxx，并不是你想运行就运行的，只有在 package.json脚本中对scripts 配置了，才可以进行 run 的，所以不是所有的项目都能 npm run dev/serve。
投资组合：我的投资组合的源文件
02-11
投资组合网站 我的投资组合网站，使用自制的静态网站生成器构建。 依存关系 用于构建网站的工具： 工具 版 用于 core-utils -- 像cp ， cat ， mkdir...npm run serve 请注意，字体未包含在此存储库中，因此您在loca
vue-vant-h5-plus:开箱即用vue-cli4 vant rem移动端框架方案
03-29
npm run serve 目录 √Vue-cli4 :check_mark_button:配置多环境变量 package.json里的scripts配置serve test build ，通过--mode xxx来执行不同环境 通过npm run serve启动本地，执行development 通过npm run test...
DaWangKa
03-20
vue-h5-模板 基于vue-cli4.0 + webpack 4 + vant ui + sass + rem适应方案+ axios封装，内置手机端模板脚手架 掘金： 建议手机端查看 节点版本要求 Vue CLI需要Node.js 8.9或更高...通过npm run serve启动本地，执行d
vue2-vite-plugin-test
04-03
yarn run serve-vite or npm run serve-vite Vue / CLI yarn run serve or npm run serve 建造 恶作剧 yarn run serve-build or npm run serve-build Vue / CLI yarn run build or npm run build 通话步骤 先通过@...
【全网首出】npm run serve报错 Expression: thread_id_key != 0x7777
最新发布
m0_52379411的博客
05-03 368
【代码】【全网首出】npm run serve报错 Expression: thread_id_key!= 0x7777。
npm详解
小张的博客
04-29 701
如果您需要单独安装npm，可以根据您的操作系统选择相应的安装方法。npm（Node Package Manager）是Node.js的包管理工具，用于安装、更新、删除和管理Node.js项目中的依赖包。当您安装Node.js时，npm会自动作为Node.js的一部分被安装。通过学习和掌握npm的基本知识和常用命令，您可以更高效地管理Node.js项目的依赖包和构建过程。这些配置选项可以影响npm的行为和性能。除了上述的基本命令外，npm还提供了许多其他命令和功能，如发布包、管理用户、查看包信息等。
pnpm设置全局存储路径
Bunny的博客
04-28 473
pnpm c get。
如何把项目启动的npm run serve改成其他命令
05-10
要把项目启动的命令从`npm run serve`改为其他命令，可以按照以下步骤操作： 1. 打开项目的`package.json`文件，找到`scripts`字段下的`serve`项，它应该长这样： ``` "scripts": { "serve": "vue-cli-service serve" } ``` 2. 把`serve`改成你想要的命令，比如`start`，改完后应该长这样： ``` "scripts": { "start": "vue-cli-service serve" } ``` 3. 保存`package.json`文件，然后在终端中运行新的命令，比如`npm run start`，就可以启动项目了。 注意：如果你的项目是用其他工具或框架创建的，那么`package.json`文件中的`scripts`字段可能会有所不同，需要根据实际情况进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值