之前写过文章《如何调试 Vue 源码》可以看到源码的构造步骤，只不过我们是基于 .html 的文件去看 vue 的执行过程，这样呢，会带来一个问题：
就是如果想要调试组件的话就需要自己手写 template 模板，手写 template 模板的话，还是不能直观的去看 .vue 文件后缀文件的编译过程。
安装完成后可以在根目录建立 vue.config.js ，其实这个文件就是 webpack 的配置。
module.exports = { runtimeCompiler: true}
为什么加这句，官方有配置参考：https://cli.vuejs.org/zh/config/#runtimecompiler
我们通过脚手架安装完 vue 使用的是 vue.runtime.esm.js「运行时版本」，我们需要更改 alias 来改变文件的指向，来使用「完整版本」。我们可以在完整版本里面去打 debugger 调试。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。更改完配置后，你可以在终端尝试输出，来看一下我们当前项目的配置：vue inspect > vue_webpack.js
在 vue_webpack.js 中，你可以看到 alias 的路径变了。vue$: \\\'vue/dist/vue.esm.js\\\'//完整版路径
现在就可以去 node_moudle/vue/dist/vue.esm.js 中打 debugger 单步调试了。
这两种调试模式，需要结合着使用，在《如何调试 Vue 源码》去粗略的看大体执行过程。利用今天文章的方法，在 vue.esm.js 里面去打断点，这样可以粗中有细的去观察 Vue 的变化 。
图片授权基于 www.pixabay.com 相关协议
推荐阅读
HTTP 协议的请求头和响应头
原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34630.html
