在 WebStorm 中调试 Vue.js 2

Question

问题在于调试器不仅会进入正确的源文件，还会进入由 Webpack 自动生成的 app.js 文件。我怎样才能防止它这样做？

我有以下设置：

我使用 vue-cli 启动了 Vue.js 2 应用程序。我的调试配置如下：

我也将此行添加到"webpack.dev.conf.js"; devtool: "source-map",

我还在调试器配置的异常中添加了 app.js 文件：

我使用npm run dev 命令启动服务器，然后从 WebStorm 启动调试会话。问题依然存在。有什么想法吗？

Answer 1

请检查以下两点：

1. 将devtool 配置更改为值'eval-source-map' 或'#eval-source-map'（我不知道添加'#' 符号或没有'#' 符号的区别，但我测试了两者都可以按预期工作) 在你有效的 webpack 配置文件中。

2. 添加调试配置与您的步骤相同。当您点击 WebStorm 中的调试配置时，系统会自动弹出一个窗口（Google Chrome 或 Firefox），请确保您只在此页面进行调试，只有在此页面触发的操作才会与您的 WebStorm 编辑器同步。这个非常重要！

它现在可以在我的开发环境中使用。

Answer 2

改用devtool: 'eval-source-map'