登录后 DevTools 无法解析 SourceMap 错误将重定向到该 js 文件

Question

我是 VueJS 的新手。我正在关注一个 YouTube 教程 Let’s Build a Multi-Purpose Laravel + Vue Application by Code Inspire

这是他的 github 包。 https://github.com/Hujjat/laravStart

我注意到。当我注销并再次登录时，它将重定向到 .js 文件。

就我而言：- http://laravel-vuejs.test/js/popper.js.map

我克隆了他的项目。我尝试使用检查，登录并注销并登录。它将重定向到 http://laravstart.test/js/laravel-vue-pagination.common.js.map

它将显示 404 错误。我每次都删除 /js/xxxx.js.map 然后才恢复正常。

我的两个项目，当我运行检查时。我注意到有 Chrome 警告。

DevTools 无法解析 SourceMap： http://laravstart.test/js/laravel-vue-pagination.common.js.map

DevTools 无法解析 SourceMap： http://laravel-vuejs.test/js/laravel-js/popper.js.map

重要提示 它仅在我打开 chrome 检查窗口时发生。如果我关闭它，它将恢复正常意味着不会重定向到 JS 文件。

录屏： https ://imgur.com/gZzcX5L

我用 Chrome 和 Firefox 进行了测试，inspect 都有同样的问题。

但在 Chrome 中，如果我关闭源地图设置，则不会出现此问题。

任何人如何解决它？编译源图问题？ js.map 文件不存在。

原文由 Shiro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我发现一个解决方案是在 public/js/popper.js.map 创建一个虚拟文件，然后它会恢复正常，基本上只是满足浏览器开发工具所需的内容，它不会重定向到该特定文件。

我相信这是浏览器开发者工具的行为。

我从 laraStart repo 所有者那里收到了解决方案。

当您遇到错误并编译您的 javascript 代码时会发生此错误。稍后，当您修复它时，它将保留在缓存中并发生。请尝试再次编译您的脚本并登录查看。

该解决方案也有效。

我运行 npm update 和 npm run dev ，它工作正常。

原文由 Shiro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你使用 Laravel Mix，你可以通过调用 webpack.mix.js 文件中的 mix.sourceMaps() 方法来生成源映射。这解决了问题。

 mix.js('resources/js/app.js', 'public/js').sourceMaps();

Laravel Mix Source Maps 文档

原文由 Tina Hammar 发布，翻译遵循 CC BY-SA 4.0 许可协议