下载源码
git clone https://github.com/vuejs/core
pnpm i
提前下载并安装好依赖。
构建源码
npm run build --sourcemap
构建 vue 源码，构建产物会为 packages\vue\dist\vue.global.js
由于默认的 vue 打包构建，是不会生成 sourcemap 的，因此我们需要加上 --sourcemap，生成 sourcemap，以方便后面调试时，能够根据 sourcemap，将构建压缩过的代码，还原成真正的源码。
开启调试
打开下载的vue源码，在packages\vue\examples目录下面有自带了几个用来调试的demo文件 。
不过自带的这几个文件是采用html文件直接引入构建后的vue源码文件的，但是我们日常开发项目使用的都是SFC（单文件组件），也就是在使用脚手架生成的项目工程中的。
那么如何在vite项目中调试vue源码呢？
有一个思路：能不能也在packages文件夹下面用vite创建个vue3的项目，然后让vite项目中node_modules里面引用的vue依赖包也使用我们上面构建出来的本地vue源码呢？
得益于vue3源码工程使用 pnpm+monorepo 的方式来组织，答案是可以的!
在vite项目中调试vue3源码
在packages文件夹下创建vite项目
cd packages
pnpm create vite
接下来是关键的了，将vite项目中vue依赖包切换我们本地的vue依赖包
先清除原先的vue依赖包，再将本地的vue项目添加为vite项目的vue依赖
cd vite-project
pnpm uninstall vue -P
pnpm i vue -r --filter vite-project
执行完上面的命令，vite项目里面的vue依赖应该是："vue": "workspace:3.2.37"
接下来就可以安装依赖，运行项目了
pnpm i
pnpm run dev
这时候在vite项目中debugger，进入浏览器调试模式（打开控制台）不出意外的话，在控制台界面应该能看到相应的ts源码文件
通过chrome的控制台，虽然也可看到相关的源码，但是总感觉在控制台那里看代码，有点不太爽（少了一些代码的智能跳转），最好是能在vs code中查看源码
在vs code中调试vue源码
vs code是自带调试功能的，在launch.json文件中配置相关内容即可开启调试功能：
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"runtimeExecutable": "D:\\browser\\APP\\chrome\\chrome.exe",
"name": "debug ng",
"url": "http://localhost:5173"
}
]
}
关于在vs code开启调试功能，可参考文档：
这样我们就可以在vs code中愉快的调试vue源码了
注意事项
如果修改了vue源码文件，需要重新执行下构建命令npm run build --sourcemap 才会生效
