我们知道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. Nginx 核心配置-作为下载服务器配置

    Nginx 核心配置-作为下载服务器配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.无限速版本的下载服务器 1>.查看主配置文件 [root@node101.yinz ...

  2. WPF系列 —— 控件添加依赖属性（转）

    WPF系列 —— 控件添加依赖属性 依赖属性的概念,用途 ,如何新建与使用.本文用做一个自定义TimePicker控件来演示WPF的依赖属性的简单应用. 先上TimePicker的一个效果图. 概念 ...

  3. Python 编码错误解决方案

    Python 编码错误解决方案 Python UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 7: ordin ...

  4. vue社区活跃整合

    ===框架===== Nuxt(vue ssr服务端渲染) Quasar Framework 一个可以搭建多平台响应式网站的框架 Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架. = ...

  5. spring学习2

    使用注解配置spring 步骤: 1. 导包4(core/bean/context/spel)+1(logging)+spring-aop包(新版spring需要导入这个包) 2. 为主配置文件引入新 ...

  6. Running Routes Kattis - runningroutes（区间dp）

    Running Routes \[ Time Limit: 12000 ms\quad Memory Limit: 1048576 kB \] 题意 给出一个正 \(n\) 边形,标号顺时针从 \(0 ...

  7. Layui 模板引擎中的 日期格式化

    原文:https://www.jianshu.com/p/948a474b5ed7 原文:https://blog.csdn.net/DCFANS/article/details/92064112 模 ...

  8. P3258 [JLOI2014]松鼠的新家题解

    题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有\(n\)个房间,并且有\(n-1\)根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在"树& ...

  9. haproxy 配置文件详解 之 综述

    HAProxy 配置文件根据功能和用途,主要有5 个部分组成,但有些部分并不是必须的,可以根据需要选择相应的部分进行配置. 1.global 部分 用来设定全局配置参数,属于进程级的配置,通常和操作系 ...

  10. android studio 修改选中内容背景色，以及匹配的内容背景色

    #与选中内容匹配的内容背景色Editor -> Color Scheme -> General -> Code -> Identifier under caret #选中内容前 ...