浏览器控制台报错Failed to load module script:解决方法
更新时间：2022年11月11日 16:03:22 作者：Xmo
这篇文章主要为大家介绍了浏览器控制台报错Failed to load module script:解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
错误
用nginx做vue3+vite2代理的时候出现了以下的报错
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
原因
经检查，出现这种状况是因为我的项目二级目录和nginx转发的目录不匹配。 在nginx配置中，我是这样写的
location /h5-page {
try_files $uri $uri/ /jd-h5/index.html last;
}
而在vite配置中，我将base设置为h5-page;
export default defineConfig(({ mode }) => ({
base: '/h5-page/',
}));
由于我转发的location和目录的base都设置为h5-page，但是我却实际上将打包好的文件放在了jd-h5这个目录中，这让nginx无法准确定位到文件因而产生了上述的报错；
解决方法
解决方法也很简单，将不匹配的部分修正即可，我将目录重命名为h5-page，然后修改nginx配置。
location /h5-page {
try_files $uri $uri/ /h5-page/index.html last;
}
总结
用二级目录托管项目，如果不想造成混淆和报错的话，应当严格遵照 目录-转发地址-项目base 统一的写法。
以上就是浏览器控制台报错Failed to load module script:解决方法的详细内容，更多关于浏览器控制台报错解决的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了NGINX服务器配置404错误页面转向的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要介绍了Nginx服务器进程数设置和利用多核CPU的方法,这样便可以更大限度地提高Nginx运行效率,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了详解Nginx实战之让用户通过用户名密码认证访问web站点,有兴趣的可以了解一下。2016-11-11
这篇文章主要为大家介绍了nginx的keepalive相关参数使用源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
本文主要介绍了nginx配置域名转发到其他域名的几种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了nginx开启HSTS让浏览器强制跳转HTTPS访问详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
本文主要介绍了Nginx配置https的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
我们经常需要在页面上实时查看nginx的日志输出，并且能在页面上显示，那么下面小编就给大家说下怎么在浏览器上实时动态的查看nginx的访问日志，有需要的朋友们可以参考借鉴。2016-09-09
这篇文章主要介绍了nginx如何配置同一个端口转发多个项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要给大家介绍了nginx如何找到默认根目录(root html),文中给出详细的解决方法,通过代码示例讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2023-11-11
最新评论