如何用 vue-cli 调试源码？

小道研究 • 2024年4月20日下午11:00 • 网站运维

之前写过文章《如何调试 Vue 源码》可以看到源码的构造步骤，只不过我们是基于 .html 的文件去看 vue 的执行过程，这样呢，会带来一个问题：

就是如果想要调试组件的话就需要自己手写 template 模板，手写 template 模板的话，还是不能直观的去看 .vue 文件后缀文件的编译过程。

所以这次我们来看一下 .vue 文件的调试方法。

我们可以直接使用 vue-cli 脚手架安装项目

vue create example

安装完成后可以在根目录建立 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 相关协议

推荐阅读

Vue 在哪步执行数据监听？

HTML 页面的渲染流程

HTTP 协议的请求头和响应头

原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34630.html