我们知道vue-cli 3.0之前直接基于webpack创建对应配置文件，我们通过学习webpack就能够了解其构建过程，然而从vue-cli 3.0开始，vue-cli命令行更改为@vue/cli以及@vue/cli-service等，他封装了webpack，使得我们很难清晰了解到底发生了什么。这时我们可能希望通过调试vue-cli-service对应build过程对其工作原理有一个大体的认知。下面记录一下这个调试过程:

1. 在git bash命令行中执行：

$ node --inspect-brk node_modules/@vue/cli-service/bin/vue-cli-service.js serve

Debugger listening on ws://127.0.0.1:9229/66ae44f1-94a1-413a-a1dd-21bca412b1c5

For help see https://nodejs.org/en/docs/inspector

2. 如果我们直接将上面监测的url ws://xxx/dafa...放到chrome地址栏中去，会报错:ERR_DISALLOWED_URL_SCHEME,这时我们需要在chrome中执行chrome://inspect ,这里就能列出来对应可以inspect的session:

如果你不喜欢每次都在chrome中敲chrome:inspect的话，还可以安装一个NIM (Node Inspector Manager)插件

3. 点击inspect后，就直接进入了对应的webpack构建代码，可以查看其运行过程了。

tips: 除了单步运行可以详细了解nodejs代码运行流程，你也可以在nodejs代码中设置一个端点以便调试全速运行时可以自动断掉,很简单在代码中添加一句话 debugger 指令即可

nodejs调试的原理

https://i5ting.github.io/node-debug-tutorial/#302

通过调试vue-cli 构建代码学习vue项目构建运行过程的更多相关文章

  1. vue cli 3.0快速创建项目

    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...

  2. node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1)：创建项目，完成登录功能

    第一章 建议学习时间8小时·分两次学习      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...

  3. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  4. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  5. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  6. ubuntu下安装vue/cli提示No command 'vue' found

    通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...

  7. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  8. React学习笔记---项目构建

    简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的 ...

  9. 第六十九篇：vue项目的运行过程

    好家伙, 1.vue的目录结构分析 来看看项目的目录 (粗略的大概的解释) 2.vue项目的运行流程 在工程化项目中,vue要做的事情很单纯:通过main.js把App.vue渲染到index.htm ...

随机推荐

  1. Python实现感知器的逻辑电路（与门、与非门、或门、异或门）

    在神经网络入门回顾(感知器.多层感知器)中整理了关于感知器和多层感知器的理论,这里实现关于与门.与非门.或门.异或门的代码,以便对感知器有更好的感觉. 此外,我们使用 pytest 框架进行测试. p ...

  2. 良心送分题(牛客挑战赛35E+虚树+最短路)

    目录 题目链接 题意 思路 代码 题目链接 传送门 题意 给你一棵树,然后把这棵树复制\(k\)次,然后再添加\(m\)条边,然后给你起点和终点,问你起点到终点的最短路. 思路 由于将树复制\(k\) ...

  3. github1：workq

    https://github.com/taf2/workq https://github.com/erez-strauss/lockfree_mpmc_queue  多生产者 多消费者 队列 < ...

  4. react.js知识汇总

    首先ract的基本结构 var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; ...

  5. 小学四则运算口算练习app---No.1

    因为对app不是很了解,对环境的配置也不是很舒心,今天主要配置了环境,了解了一些相关app的简单操作以及安卓stdiuo的使用!如下: 我自己连接的自己的手机(还是不要拿自己的手机做测试哦!模拟器虽然 ...

  6. Oracle EBS 11i x86-64 的预安装

    1.EBS11i的软件组成,28个zip包 Oracle ApplicationsOracle Application with NLSOracle Database technology stack ...

  7. nuxtjs如何通过路由meta信息控制路由查看权限

    我们知道NUXTJS可以通过路由中间件进行路由鉴权,中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前. 但是我在实际使用过程中发现,中间件只有在路由跳转到路由中时才会进入,而在强制刷新网 ...

  8. nginx 日志之 access_log分割

    如果任由访问日志写下去,日志文件会变得越来越大,甚至是写满磁盘. 所以,我们需要想办法把日志做切割,比如每天生成一个新的日志,旧的日志按规定时间删除即可. 实现日志切割可以通过写shell脚本或者系统 ...

  9. virtualbox安装问题总结

    还是老问题 重点重点: https://blog.csdn.net/Loisleen/article/details/84975165#1install_the_gcc_make_perl_packa ...

  10. SQL2008R2下数据库修复一例

    某天访问某个数据库的时候,系统报错.连上去看了一下,服务器是SQL2008R2.由于有上次修复的经验,先使用DBCC查看数据库情况. DBCC的返回: XXXXXXXXXXX发生异常数据库 ID 7, ...