我们知道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. 查看mysql连接数和状态

    查看MySQL连接数 登录到MySQL命令行,使用如下命令可以查看当前处于连接未关闭状态的进程列表: show full processlist; 若不加上full选项,则最多显示100条记录. 若以 ...

  2. Latex使用过程中的一些总结

    本文主要总结在使用Latex过程中遇到的一些问题及解决方案. 一:关于参考文献 1.如何在paper同一处用\cite命令同时引用多篇文献? 用\cite{bibtex1}\cite{bibtex2} ...

  3. opencart忘记登录密码怎么办

    今天一位客户问opencart忘记登录密码怎么办,他们公司内部有几位员工同时在管理,可能是哪位同事把密码给改了没有跟大家说,现在都登录不了.这个只能数据库修改了.进入opencart的数据库,找到oc ...

  4. MySQL | MySQL 数据库系统（一）

    ## 1.什么是 MySQL 数据库? MySQL 数据库是一个关系型数据库管理系统,是服务器领域中受欢迎的开源数据库系统,目前有 Oracle 公司主要负责运营与维护: ## 2.MySQL 数据库 ...

  5. VIJOS-P1320 清点人数

    JDOJ 1427: VIJOS-P1320 清点人数 题目传送门 Description 初始时,火车上没有学生:当同学们开始上火车时,年级主任从第一节车厢出发走到最后一节车厢,每节车厢随时都有可能 ...

  6. 实现：笑脸_Crack

    直接载入OD,观察发现弹窗可能为MessageBox,那么进行对windows api函数的搜索 跟进反汇编窗口跟随函数,来到这里,直接进行断点操作 运行程序,跑到断点处,如下图 接着发现堆栈窗口有调 ...

  7. Mongo 服务器的安装

    MongoDB的安装 CentOS 中使用yum安装: touch /etc/yum.repos.d/mongodb-org-4.2.repo vim /etc/yum.repos.d/mongodb ...

  8. VMware Workstation创建Windows2012server虚拟机

    镜像文件需要下载到物理机 3.需要输入iso文件 对应的密钥 定义普通的用户名与密码 4.指定按照路径 5. 大概都是下一步 根据提示需要重启 选择带GUI的服务器进行安装,因为windows命令行模 ...

  9. vue之父子组件通信

    一. 父-子组件间通信 let children={    template:`<div><h1>{{send}}</h1></div>`,  # 将传 ...

  10. Linux终端图形库编程

    /* *drawWin.c */ #include<stdio.h> #include<stdlib.h> #include<string.h> #include& ...