laravel 登录后 DevTools failed to parse SourceMap 错误将重定向到该 js 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54041556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DevTools failed to parse SourceMap error after login will redirect to that js file
提问by Shiro
I am new to VueJS. I am following one of the YouTube tutorial Let's Build a Multi-Purpose Laravel + Vue Application by Code Inspire
我是 VueJS 的新手。我正在关注 YouTube 教程之一让我们通过 Code Inspire 构建多用途 Laravel + Vue 应用程序
This is his github package. https://github.com/Hujjat/laravStart
这是他的github包。 https://github.com/Hujjat/laravStart
I notice. When I logout and login again, it will redirect to .js file.
我注意到。当我注销并再次登录时，它将重定向到 .js 文件。
for my case:- http://laravel-vuejs.test/js/popper.js.map
对于我的情况：- http://laravel-vuejs.test/js/popper.js.map
and I clone his project. I tried with inspect, I login and logout and login. It will redirect to http://laravstart.test/js/laravel-vue-pagination.common.js.map
我克隆了他的项目。我尝试检查，我登录并注销并登录。它将重定向到 http://laravstart.test/js/laravel-vue-pagination.common.js.map
It will show 404 error. I have every time remove the /js/xxxx.js.map then only back to normal.
它将显示 404 错误。我每次都删除 /js/xxxx.js.map 然后才恢复正常。
Both of my project, when I run inspect. I notice have the Chrome warning.
我的两个项目，当我运行检查时。我注意到有 Chrome 警告。
DevTools failed to parse SourceMap: http://laravstart.test/js/laravel-vue-pagination.common.js.map
DevTools 解析 SourceMap 失败：http://laravstart.test/js/laravel-vue-pagination.common.js.map
DevTools failed to parse SourceMap: http://laravel-vuejs.test/js/laravel-js/popper.js.map
DevTools 解析 SourceMap 失败：http://laravel-vuejs.test/js/laravel-js/popper.js.map
IMPORTANT NOTEIt only happen when I open the chrome inspect windows. If I close it, it will back to normal means won't redirect to JS file.
重要说明只有当我打开 chrome 检查窗口时才会发生这种情况。如果我关闭它，它将恢复正常意味着不会重定向到 JS 文件。
Screen record: https://imgur.com/gZzcX5L
I tested with Chrome and Firefox with inspect both having the same problem.
我用 Chrome 和 Firefox 进行了测试，检查都存在同样的问题。
But in Chrome if I off setting for source map, it will not have this issue.
但是在 Chrome 中，如果我关闭源地图设置，则不会出现此问题。
Anyone how to fix it? Compile source map issue? the js.map file not exist.
任何人如何修复它？编译源映射问题？js.map 文件不存在。
采纳答案by Shiro
I found that one solution is created a dummy file at public/js/popper.js.map, then it will back to normal, basically just fulfil what browser developer tool required, it will not redirect to that specific file.
我发现一种解决方案是在 处创建了一个虚拟文件public/js/popper.js.map，然后它会恢复正常，基本上只是满足浏览器开发人员工具所需的功能，它不会重定向到该特定文件。
I believe this is browser developer tools behaviour.
我相信这是浏览器开发人员工具的行为。
I received solution from the laraStart repo owner.
我从 laraStart 回购所有者那里收到了解决方案。
This error happens when you have an error and compile your javascript code. Later, when you fix it, it will remain in cache and happens. Please try to compile your script again and login to see.
当您遇到错误并编译 javascript 代码时会发生此错误。稍后，当您修复它时，它将保留在缓存中并发生。请尝试再次编译您的脚本并登录查看。
The solution is also working as well.
该解决方案也有效。
I run npm updateand npm run dev, it is working fine.
我跑npm update和npm run dev，这是工作的罚款。
回答by Tina Hammar
If you use Laravel Mix, you can generate source maps by calling the mix.sourceMaps() method in your webpack.mix.js file. This resolves the problem.
如果你使用 Laravel Mix，你可以通过调用 webpack.mix.js 文件中的 mix.sourceMaps() 方法来生成源映射。这解决了问题。
mix.js('resources/js/app.js', 'public/js').sourceMaps();
回答by Jacob Bradley
Open "find in files", find every commented line of code that has
打开“在文件中查找”，找到每个注释的代码行
sourceMappingURL=...
Delete the whole commented line for each.
删除每个注释的整个行。
There should be 3 entries here in public/app.js and 1 at the end of popper.js.
public/app.js 中应该有 3 个条目，popper.js 末尾应该有 1 个条目。
If you are using Brave shields or an ad blocker, turn it off
如果您正在使用 Brave 盾牌或广告拦截器，请将其关闭
回答by Jun Salen
There are two SourceMap error in my case so the two previous answers applied to me. 1) By adding sourceMaps() in the mix.js function in webpack.mix.js file
在我的情况下有两个 SourceMap 错误，所以前两个答案适用于我。1) 通过在 webpack.mix.js 文件中的 mix.js 函数中添加 sourceMaps()
mix.js('resources/js/app.js', 'public/js').sourceMaps();
to remove popper.js source map error.
删除 popper.js 源映射错误。
2) Adding toastr.js.map to public/js folder to remove toastr.js source map error.
2) 将 toastr.js.map 添加到 public/js 文件夹以删除 toastr.js 源映射错误。
回答by Alphas Bravos
The best solution is just copy the popper.js.min from
最好的解决方案是复制 popper.js.min 从
node_modules - popper.js - dist -> popper.js.min
node_modules - popper.js - dist -> popper.js.min
this solved my headache
这解决了我的头痛
