浏览器控制台报错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是反向代理和负载均衡的首选工具，nginx的location配置有许多细节内容在网上不容易找到资料，或者解释不清。本文对Nginx location规则优先级介绍，需要的朋友参考下吧2021-08-08
这篇文章主要介绍了Nginx实现静态资源的反向代理实例,本文通过分析github发现这个应用,可以避免在https的网站中出现http链接,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了Nginx中proxy_pass指令斜杠的作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
nginx location指令(匹配顺序匹配冲突)实战示例详解
这篇文章主要介绍了nginx location指令(实战示例匹配顺序匹配冲突)详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了Ansible批量部署Nginx的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Nginx 设置域名转发到指定端口的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
Nginx 502 Bad Gateway错误原因及解决方案
这篇文章主要介绍了Nginx 502 Bad Gateway错误原因及解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
nginx部署前端项目location时root和alias配置指南
nginx指定文件路径有两种方式root和alias,下面这篇文章主要给大家介绍了关于nginx部署前端项目location时root和alias配置的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Nginx+Tomcat群集的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-07-07
这篇文章主要介绍了一些优化Nginx服务器的技巧简介,包括对HTTP模块和Events模块的配置建议,需要的朋友可以参考下2015-06-06
最新评论