vscode调试 Vue 项目
Vue 项目的创建有两种方式：
- 用 @vue/cli 创建的 webpack 作为构建工具的项目
- 用 create-vue 创建的 vite 作为构建工具的项目
调试 @vue/cli 创建的 webpack 项目
首先安装 @vue/cli：
yarn global add @vue/cli
然后执行以下命令创建 vue 项目：
vue create vue-demo1
选择 vue3 的模版。
安装完之后进入到 vue-demo1 目录，执行 npm run serve 把开发服务跑起来。
浏览器访问，会看到渲染出的页面：
然后我们进行调试：
点击调试窗口的 create a launch.json file 来创建调试配置文件：
把 Chrome 调试配置的 url 改成目标 url 就可以进行调试了：
点击 debug 启动，在 vue 组件里打个断点，你会发现断点没生效：
这是为什么呢？
我们先加个 debugger 来跑一下：
然后在 Chrome DevTools 里看下：
你会发现他从一个乱七八糟的路径，映射到了 webpack://vue-demo1/src/App.vue?11c4 的路径下。
然后在 VSCode Debugger 里看看这个路径：
发现是 /Users/guang/code/vue-demo1/src/App.vue?11c4
本地明显没这个文件，所以就只读了。
其实这个路径已经做过了映射，就是完成了从 webpack:///vue-demo1/src/App.vue?11c4 到 /Users/guang/code/vue-demo1/src/App.vue?11c4 的映射。
看一下 sourceMapPathOverrides 默认这三条配置，很容易看出是最后一条做的映射：
"sourceMapPathOverrides": {
"meteor://app/*": "$workspaceFolder}/*",
"webpack:///./~/*": "$workspaceFolder}/node modules/*",
"webpack://?:*/*": "${workspaceFolder}/*"
}
但问题就出现在后面多了一个 ?hash 的字符串，导致路径不对了。
那为什么会多这样一个 hash 呢？
这是因为 vue cli 默认的 devtool 设置是 eval-cheap-module-source-map，前面讲过，eval 是每个模块用 eval 包裹，并且通过 sourceURL 指定文件路径，通过 sourceMappingURL 指定 sourcemap。
在 Chrome DevTools 里点击下面的 source map from 的 url：
你会发现先映射到了一个中间文件：
这个是被 eval 包裹并指定了 sourceURL 的模块代码，会被 Chrome DevTools 当作文件加到 sources 里。
这里有两个 sourceURL，第一个 sourceURL 在 sourceMappingURL 之前，这样 sourcemap 映射到的就是这个 url，也就是被 Chrome DevTools 当作文件的路径。而第二个 sourceURL 在之后，它可以修改当前文件的 url，也就是在调试工具里展示的路径。
然后再点击，会跳转回 bundle 的代码：
这些被 eval 包裹的就是一个个的模块代码。
这些是上节讲过的内容，这样有啥问题么？
第一个 sourceURL 的路径是通过 [module] 指定的，而模块名后默认会带 ?hash：
最后更新于 2026-02-11 18:51