vue.js - Vue - 在 Chrome 开发工具中显示错误行

Question

我尝试设置源 map ，希望它能在 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"

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