通过debug搞清楚.vue文件怎么变成.js文件
我们每天写的vue代码都是写在vue文件中，但是浏览器却只认识html、css、js等文件类型。所以这个时候就需要一个工具将vue文件转换为浏览器能够认识的js文件，想必你第一时间就想到了webpack或者vite。但是webpack和vite本身是没有能力处理vue文件的，其实实际背后生效的是vue-loader和@vitejs/plugin-vue。本文以@vitejs/plugin-vue举例，通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的，看不懂你来打我。
举个例子
这个是我的源代码App.vue文件：
这个例子很简单，在setup中定义了msg变量，然后在template中将msg渲染出来。
下面这个是我从network中找到的编译后的js文件，已经精简过了：
编译后的js代码中我们可以看到主要有三部分，想必你也猜到了这三部分刚好对应vue文件的那三块。