Google Chome 99+ DevTools Source 选项卡未在 Webpack SRC 文件夹中显示 VUE 文件代码

Question

如果我没有很好地表达标题，我很抱歉，因为我完全不知道技术术语是什么，也不知道如何寻找答案。直到我将 Google Chrome 更新到版本 99.0.4844.51 后，这才成为问题。这也是 Windows Edge 中的问题，但 Firefox 97.0.2 开发工具中不是。

我有一个相当标准的多页面 Vue 2 应用程序。我正在尝试调试一个问题，在 Chrome DevTools（而不是Vue DevTools）中，我曾经能够查看单个文件组件的源代码并逐步执行方法等。

Chrome DevTools Source 选项卡的左侧有 Page 选项卡。在 webpack:// 文件夹中，您有四个子文件夹，其中之一是 SRC。它列出了我的 .vue 文件，但没有显示典型的模板、脚本和样式代码部分，而是显示了以下内容。导入列表和热重载。

我不确定基于 Chrome 的 DevTools 发生了什么变化。Chrome 有新的设置吗？

如果您可以就如何更好地表达我的问题提出建议，请提出建议。感谢您的耐心和理解。

更新1：

这是我到目前为止所发现的。源面板不会按照本地主机本地开发中的预期加载 vue 文件。

在我们的生产站点上，有些页面会，有些则不会。这样做的页面和不这样做的页面之间的唯一区别是相对导入。

有效的示例页面将使用利用 Webpack 解析别名配置的导入。

没有的页面将包含带有类似import file"./somefile.js"或之类的路径的导入import file from "../../folder/somefile.js"

我已经通过将导入路径更改为 Webpack 的解析别名路径在本地进行了测试，但它没有解决问题。

有没有人遇到这个问题类似进口？

更新2：

我创建了一个显示该问题的项目/存储库，以便 Chromium 团队可以解决该问题。

更新 3： Firefox 似乎遇到了与 Chromium 非常相似的问题。我用 Vue 提出了一个问题，因为虽然 Chromium 用创可贴修复了它，但显然根源是 Vue 和 Webpack。

最终更新： 我发布了一个用于迁移到 vite 的 vite 配置。一个月前我终于有时间来做所有的工作。您可以在此处查看细分。 https://github.com/vuejs/vue/issues/12689#issuecomment-1536760736

Answer 1

这是铬的问题，票证已关闭并标记为已修复。当前修复适用于版本 103.0.5016.0（官方版本）canary（64 位）。