我们知道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. Google Chrome 解决 “您的连接不是私密连接” 和被毒霸劫持

    一.解决 “您的连接不是私密连接” 前一段时间,Chrome 突然显示出了“您的连接不是私密连接”,这下可难受了,大部分的网站打开都有问题. 找了各种方法,各种设置都是不行. 一.暴力.费力的方法直接 ...

  2. 模板语言、url

    伪造一个数据库全局变量 (字典无序) USER_LIST 列表变字典(元祖和列表直接循环就好,字典涉及到k_v) UESR_DICT 遍历方法 1. 2. 3. 4. 5. 6.键入链接 通过a标签包 ...

  3. 2016 ACM/ICPC亚洲区沈阳站

    A B C D E F G H I J K L M O O O $\varnothing$ $\varnothing$   $\varnothing$ $\varnothing$ $\varnothi ...

  4. 2.搭建第一个http服务:三层架构

    package main import ( "github.com/go-kit/kit/transport/http" "gomicro/Services" ...

  5. IIS 报错 Cannot open database "test4" requested by the login. The login failed. Login failed for user 'IIS APPPOOL\test1'.

    报错: Cannot open database "test4" requested by the login. The login failed. Login failed fo ...

  6. selenium--单选框和复选框的操作

    单选框操作 from selenium import webdriver import unittest class Test_radio(unittest.TestCase): def test_S ...

  7. Docker入门笔记（Centos7）

    centos7 wget https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/centos/docker-ce.repo vim docker-c ...

  8. 你好,我叫Flask

    首先,要看你学没学过Django 如果学过Django 的同学,请从头看到尾,如果没有学过Django的同学,并且不想学习Django的同学,轻饶过第一部分 一. Python 现阶段三大主流Web框 ...

  9. Kafka Offset Monitor页面显示空白

    下载包:https://github.com/Morningstar/kafka-offset-monitor.git 解决:jar包内\KafkaOffsetMonitor-assembly-0.2 ...

  10. cad.net vs调试问题 20190923增加默认启动注册表,20191007更新vs2019到16.3.2

    Acad2008和Acad2010需要修改安装目录下的acad.exe.config文件内容,才可以捕获断点: <configuration> <startup> <!- ...