Vue - 在 Chrome 开发工具中显示有错误的行

Question

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

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

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

和

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

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

这是我的 package.json 片段

"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组件中的错误。

Answer 1

如果错误发生在组件的 javascript 部分，错误应该看起来像这样：

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

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

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

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

Answer 2

您的错误似乎来自组件的 template 部分。

地图将无法处理模板错误，因为模板已转换为大型 javascript 函数（渲染）并且模板与渲染函数之间的连接丢失。

最好设置一个 error handler 并记录下来。

Answer 3

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

我建议使用它的原因很简单，有时你的代码可能是正确的，但正如你的错误示例中所写的那样 "Cannot read property 'poll' of undefined" 看起来 prop poll 没有被正确填充父组件，或任何将数据推送到 PollHeading.vue 文件的组件。

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

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

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

Vue - 在 Chrome 开发工具中显示有错误的行

Vue - show line with error in Chrome dev tools

google-chrome-devtools

webpack

vue.js