最近如何调试Vue项目？

Question

我正在维护一个Vue2项目，在这个项目中，我最近将@vue/cli-service升级到5.0.4版(从4.5.0版本)。现在我注意到我不能再用我的浏览器devtools来调试这个应用程序了。具体来说，当我打开devtools并按CTRL+P并键入App.vue时，浏览器将打开该文件的编译版本。以前，它将打开原始源文件，并允许我在该文件中放置工作断点。

这个问题发生在Chrome、Edge和Firefox中。

这个问题甚至发生在由最新的@vue/cli (版本5.0.4也)生成的默认项目支架上，并且类型记录和babel被禁用(例如使用vue create testProject生成的项目)。

事实上，这个问题甚至发生在由生成的默认的npm init vue@latest Vue3 3/Vite项目支架上。不管有没有打字稿。我不知道Vue生态系统中的任何人是如何调试他们的项目的。

我已经尝试过设置configureWebpack.devtool = 'source-map' --这还没有产生任何效果。

我做错了什么吗？

Answer 1

这是对我有用的。我试着复制(npm init vue@ reproduce )。当我点击ctrl时，建议的第一个App.vue是编译后的版本。但是，如果您继续查找列表，请查找在其后面有目录路径的App.vue，您应该可以看到您的源代码并能够放置断点。我还喜欢在devtools中的sources选项卡的文件系统子选项卡中打开我的源目录，这也很好，包括断点。

​

​