前言

最近在用vue3开发的时候，debug 代码时，sourcemap 中的代码和文件中的代码行号对不上，debug 也有异常，在此记录下来，希望能帮助到有缘人。

问题描述

在我的代码中第四行打了断点，想调试代码:

<script setup lang="ts" name="demo">
import { ref } from "vue";

debugger;
for (let i = 0; i < 10; i++) {
  console.log(i);
}
</script>

结果在浏览器中调试的时候发现有异常，sourcemap 明显是经过编译的产物，断点断在第四行，却不是debugger 的位置，单步执行时，无法查看变量当前的值，点击左边行号也没法新建新的断点。

解决方案

最后经过几番查询，发现是vite-plugin-vue-setup-extend 插件的问题，不用这个插件生成的断点如下:

可以看到，sourcemap 中的代码就是我们vue文件的源码，debug 调试也正常了。

这个插件是用来解决vue3 setup 语法糖中无法给组件命名的缺陷的，不用插件的情况我们一般是这样写

<script lang="ts">
export default {
  name: "Demo",
};
</script>

<script setup lang="ts">
import { ref } from "vue";

debugger;
for (let i = 0; i < 10; i++) {
  console.log(i);
}
</script>

我们必须新加一个<script>标签来定义name，不怎么优雅，有了这个插件之后，就可以像这样写 <script setup name='Demo'></script>，要方便很多。

在插件github仓库中，有人提了这个issue 调试断点位置错乱 · Issue #11 · vbenjs/vite-plugin-vue-setup-extend (github.com))但是作者一直没有修复，仓库的上一次提交记录也在6月前了，似乎不会更新了，而这个插件周下载量有7000 +，相信很多小伙伴都在用，所以应该不止我一个倒霉蛋儿。

我的解决方案是用vite-plugin-vue-setup-extend-plus ,这个包是从vite-plugin-vue-setup-extend fork过来的,解决了这个bug，安装后直接替换即可。

后记

这个bug还是比较影响开发体验的，而且在网上搜也基本上搜不出答案，在此记下来，希望对各位有所帮助。

vue3 开发者一定要看，setup 语法糖排坑

前言

问题描述

解决方案

后记