浏览器控制台报错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反向代理与负载均衡实战篇,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了在nginx中实现单位时间内限制访问频率的教程,并非针对IP而是全局的访问量限制,需要的朋友可以参考下2015-04-04
这篇文章主要给大家介绍了关于Nginx日志自定义记录以及启用日志缓冲区的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Nginx具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了详解nginx代理天地图做缓存解决跨域问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
在微服务化进程中,利用nginx+lua+redis实现灰度发布至关重要,,通过nginx+lua反向代理,根据客户端ip进行路由控制,配合redis存储允许访问微服务的ip地址,可以有效地进行用户分流,感兴趣的可以了解一下2024-10-10
本文介绍了如何使用Kubernetes部署Nginx，并通过Nginx访问Tomcat，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-08-08
Centos7.3 安装部署Nginx并配置https的方法步骤
这篇文章主要介绍了Centos7.3 安装部署Nginx并配置https的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要给大家介绍了关于Nginx基础学习之realip模块使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Nginx具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2020-06-06
这篇文章主要介绍了1分钟搞定Nginx版本的平滑升级与回滚的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
nginx服务器access日志中大量400 bad request错误的解决方法
这篇文章主要介绍了nginx服务器access日志中大量400 bad request错误的解决方法,本文结论是空主机头导致的大量400错误日志,关闭默认主机的日志记录就可以解决问题,需要的朋友可以参考下2015-01-01
最新评论