vue.js - 如何区分 Chrome 开发工具中同名的 VueJS + WebPack 模块？

问题描述

我正在开发一个VueJS捆绑了WebPack 4. 它有许多CRUD模块，每个模块都有一个目录，但每个模块都有相同的命名文件。所以....

components
  ╠═ Person
  ║   ╠═ index.js
  ║   ╠═ Create.vue
  ║   ╠═ Update.vue
  ║   ╠═ Retrieve.vue
  ║   ╚═ Delete.vue
  ╠═ Tool
  ║   ╠═ index.js
  ║   ╠═ Create.vue
  ║   ╠═ Update.vue
  ║   ╠═ Retrieve.vue
  ║   ╚═ Delete.vue
  ╚═ Zone
      ╠═ index.js
      ╠═ Create.vue
      ╠═ Update.vue
      ╠═ Retrieve.vue
      ╚═ Delete.vue

我的问题是，Create.vue, Update.vue, Retrieve.vue, Delete.vue当我使用Chrome Dev Tools.

如果我输入一个console.log()，Tool/Update.vue我可以在 Chrome 控制台中看到记录的消息，但是当我单击源代码参考（在右侧）时，显示的代码来自Person/Update.vue.

我根本看不到在正确的模块中设置断点。

我是否必须重构我的整个项目以始终使用不同的名称？是否有 WebPack 设置来强制执行名称间距？

作为一种解决方法，我暂时重命名Tool/Update.vue为Tool/dbgUpdate.vue，修复对它的所有引用，然后我可以找到它并调试它。

更新：2018-11-30

我遵循了 Nandiin Bao 的完全有效的建议，但没有得到相同的结果，而是得到：

这些文件中没有一个可以漂亮地打印到类似于源代码的任何东西上。

唯一看起来像源代码的文件可以在这里找到：

但是每个都有一个，所以我又回到了同样的问题。

我的 webpack 配置是由vue-cli 3

标签： vue.jswebpacknamespacesgoogle-chrome-devtoolsvue-cli

vue.js - 如何区分 Chrome 开发工具中同名的 VueJS + WebPack 模块？

问题描述

解决方案

推荐阅读