javascript - VueJS堆栈跟踪不显示发生错误的位置

上下文

我在项目中将VueJS与webpack一起使用。

我没有使用vue-loader插件或.vue文件。

我的项目的结构类似于导入vue的标准Javascript Webpack项目。

我的webpack配置具有以下相关选项：

正在生成我的webpack Javascript捆绑文件的源映射。

编程时，控制台中显示错误。不幸的是，堆栈跟踪将错误显示为vue.js文件，随后是webpack生成的Javascript捆绑文件（main.js）。

似乎webpack为我的Javascript捆绑包生成的源映射无法正常工作。

我发现了several related issues，但是这些问题似乎与我不使用的vue-loader Webpack插件有关。

在Firefox中查看应用程序源，我可以确认源映射无法正常工作：

在Chrome中也会发生相同的行为。

是什么导致源地图无法正常工作？

注意：屏幕截图中显示的错误不是焦点，我能够弄清楚。问题的主要焦点是源映射无法正常工作。在问题出现时使调试变得更加困难。

如果您是在Chrome中调试的，而源地图却无法正常工作，那么您可以使用其他一些选择。这可能不像使Sourcemaps正常运行那样有用，但是您的问题已经一年半没有得到回答，因此也许会很有用。

我的最爱之一是使用“来源”标签中的“例外时暂停”开关。在上面的图片中是带有暂停图标的八角形。点击该按钮，刷新页面。当发生错误时，您的应用程序将在完整的堆栈跟踪中因错误而暂停，如下所示：

该调用堆栈是可单击的。您可以通过调用函数向后移动，直到看到自己来源可识别的内容。如果源映射无法正确加载，建议您寻找字符串文字。这些不会在输出中缩小，并且可以将您带回到触发错误的位置。

此外，您可能需要考虑使用Vue.js DevTools之类的Vue插件。我发现这种以数据为中心的应用程序视图很有帮助。您可以查看状态和变异，甚至可以重放或修改应用程序中发生的操作以查明错误。