我很抱歉,如果我没有措辞的标题很好,因为我是在一个完全失去了什么技术术语是和真正如何寻找一个答案。这不是一个问题,直到我更新谷歌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:
这是我迄今为止发现的。源代码面板没有像在localhost上的本地开发中预期的那样加载vue文件。
在我们的生产网站上,有些页面会,有些则不会。支持和不支持的页面之间的唯一区别是相对导入。
示例页面将使用Webpack解析别名配置的导入。
不包含import file"./somefile.js"
或import file from "../../folder/somefile.js"
路径的页面将导入
我已经通过将导入路径更改为Webpack的解析别名路径进行了本地测试,但它没有解决这个问题。
有没有人在这个问题上遇到过类似的问题?
更新二:
我创建了一个项目/repo来显示这个问题,以便Chromium团队可以修复这个问题。
**更新3:**Firefox似乎遇到了与Chromium非常相似的问题。我打开了Vue的一个问题,因为虽然Chromium用创可贴修复了它,但很明显根源是Vue和Webpack。
**最终更新:**我发布了一个vite配置,用于迁移到vite。一个月前我终于有时间做所有的工作。你可以在这里查看细分。https://github.com/vuejs/vue/issues/12689#issuecomment-1536760736
2条答案
按热度按时间xqkwcwgp1#
这是 chrome 的问题,票据已关闭并标记为已修复。当前修复在版本103.0.5016.0(官方构建)金丝雀(64位)中工作。
8fsztsew2#
我尝试使用
eval-source-map
。好像可以看到源代码。但在出现错误时仍存在一些问题。不可能直接定位特定的线路。