Chrome 99 中 Vue 代码不显示？这篇文章帮你轻松解决
2024-03-11 04:36:27
解决 Chrome 99 及更高版本中 Vue 文件代码不显示的问题
Chrome 99 中 Vue 源代码消失的谜团
如果您是 Vue 开发人员，您可能已经注意到自将 Chrome 浏览器更新到版本 99 以来，在 DevTools 的 Source 选项卡中无法看到 Vue 文件的代码。这一令人抓狂的问题也出现在 Windows Edge 中，但 Firefox 却不受影响。
深入原因：相对导入惹的祸
经过一番深入探究，发现此问题源自 Chrome DevTools 的变更，导致它无法正常加载本地开发中的 Vue 文件。有趣的是，在生产环境中，某些页面可以正常显示 Vue 代码，而另一些页面则不行。唯一的差异在于相对导入。
拨云见日：两种行之有效的解决方案
对于此恼人的问题，目前有两种有效的解决方案：
1. Webpack 别名配置：重写导入路径
使用 Webpack 的别名配置重写导入路径可以解决问题。例如，将以下导入路径替换为 Webpack 别名路径：
import file from "./somefile.js"
import file from "@alias/somefile.js"
2. 弃用 Webpack，拥抱 Vite
Vite 是一个现代的构建工具，可以取代 Webpack。它具有更快的性能、更简单的配置，并且可以解决 Chrome DevTools 中 Vue 文件代码不显示的问题。
操作指南：告别烦恼
方法 1：Webpack 别名配置
- 打开你的 Vue 项目。
- 在
webpack.config.js文件中，添加以下别名配置：
resolve: {
alias: {
"@alias": path.resolve(__dirname, "src"),
},
},
- 保存更改并重启开发服务器。
方法 2：拥抱 Vite
- 创建一个新的 Vue 项目或将现有项目迁移到 Vite。
- 按照 Vite 文档中的说明进行操作。
额外提示：尝试探索
- 如果上述方法仍然无效，请尝试将 Chrome 更新到最新版本。
- 可以尝试在 Chrome 的 DevTools 设置中启用实验性功能，例如“启用实验性 Web API”。
- 如果问题依然存在，不妨向 Chrome 团队报告错误。
常见问题解答
-
为什么只有 Chrome 受影响，而 Firefox 没有？
答：这是由于 Chrome DevTools 的特定变更造成的。 -
WebPack 的别名配置有什么作用？
答：它重写了导入路径，使 Chrome DevTools 能够正确加载 Vue 文件。 -
Vite 比 Webpack 有什么优势？
答：Vite 具有更快的性能、更简单的配置，并且可以解决此问题。 -
如果所有方法都无效，我该怎么办？
答：请将错误报告给 Chrome 团队，等待官方修复。 -
这个错误什么时候会得到解决？
答：目前尚不清楚，取决于 Chrome 团队的修复进度。
结论：重获代码掌控
经过一番探究，我们找到了两种解决 Chrome 99 及更高版本中 Vue 文件代码不显示问题的有效方法。如果您遇到此问题，不妨尝试上述解决方案，恢复对 Vue 代码的掌控。如果您有任何其他问题或发现，欢迎在下方留言。
