Vue - 在 Chrome 开发工具中显示错误行答案

【问题标题】：Vue - show line with error in Chrome dev toolsVue - 在 Chrome 开发工具中显示错误行
【发布时间】：2020-04-08 22:53:17
【问题描述】：

我尝试设置源映射，希望它会导致在 Chrome 开发人员工具中显示错误的真实位置。

我在vue.config.js中尝试了这些选项：

configureWebpack: {
  devtool: 'eval-source-map',
},

和

configureWebpack: {
  devtool: 'source-map',
},

但我仍然收到这样的错误：

这是我的package.jsonsn-p

"scripts": {
  "serve": "vue-cli-service serve",
...
"devDependencies": {
  "@vue/cli-plugin-babel": "^3.12.1",
  "@vue/cli-plugin-pwa": "^3.12.1",
  "@vue/cli-service": "^4.2.3",

如何解决？正确设置源映射后出现的错误如何？

更新：最小可重现项目：https://wwww.github.com/literakl/vue-errors Vue组件中的错误会发生这种情况。

【问题讨论】：

请点赞：github.com/vuejs/vue/issues/10966

标签： vue.js webpack google-chrome-devtools

【解决方案1】：

如果错误发生在组件的 javascript 部分，则错误应如下所示：

看起来你的设置是正确的，我的vue.config.js看起来像这样：

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

我也用"@vue/cli-service": "^4.2.0"

确保您已重新启动服务脚本 -- 否则它将无法工作

【讨论】：

你会这么好心看看我的存储库吗？你可能会注意到一些不同。谢谢你。 github.com/literakl/mezinamiridici/tree/master/spa
我试图通过再次运行 npm run serve 将 vue.config.js 中的第 3 行更改为 devtool: 'source-map', 重新启动开发服务器，然后它起作用了，为了透明，我在 @ 中的第 54 行之后添加了 this.asdf(); 987654333@ 引发错误。希望这行得通。在 github.com/perlindstroem/mezinamiridici 的最后一次提交中添加了这个，从你链接的 repo 分叉。
您的示例错误也适用于我。但是当我有一个错误是某个组件时，没有任何改进。例如 PollHeading:
{{itemz.poll.votes.total}} votes

我在那里创建了最小可复制项目：github.com/literakl/vue-errors

【解决方案2】：

我不确定您是否已经在使用 VueJS devtool 扩展，但您也绝对应该在整个工作流程中使用它。可用于Chrome 和Firefox。

我建议使用它的原因很简单，有时您的代码可能是正确的，但正如您在错误示例“无法读取未定义的属性 'poll'”中所写的那样，看起来 prop poll 不是由父组件正确填充，或者任何将数据推送到 PollHeading.vue 文件的东西。

使用 Vue 开发工具，您可以检查单个组件的数据、道具和计算属性，在事件展开时观察事件，并在整个应用程序中直观地跟踪数据流。

尤其是对于复杂的数据传输，这可能会有点失控，而将其可视化的好工具可以挽救生命。

也就是说，在 Vue2 中获取错误的明确行号是一种命中或未命中的情况；使用 Vue 2.5 及更高版本，您可以在组件内使用place an errorHandler() hook，这将为您提供详细的堆栈跟踪。尝试在 PollHeading.vue 文件中放置一个，看看它会给你什么输出。应该比你得到的默认输出详细得多。

【讨论】：