Vite项目部署Nginx后刷新页面报错：模块脚本加载失败的解决方案
Vite项目部署到Nginx服务器后，根路径访问正常，但刷新非根路径（例如/me/userinfo）时，出现“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.”错误。此错误表明服务器返回了错误的MIME类型，浏览器无法正确解析JavaScript模块。根本原因是Nginx服务器未正确处理非根路径请求，导致返回HTML响应而非JavaScript模块脚本。
解决方法需要从以下几个方面入手：
vite.config.js 中的 base 配置: 如果项目部署在非根路径下（例如/app），则需要在vite.config.js中正确配置base属性。例如：base: '/app/'。 这确保编译后的index.html中所有资源路径都包含正确的 base 前缀。
文件部署: 确认项目文件已完整且正确地发布到服务器的指定目录，并检查文件权限。
Nginx 配置： 对于不使用#号的非根路径URL（例如/me/userinfo），需要在Nginx配置中添加rewrite规则，将所有非根路径请求重定向到index.html。 这使得浏览器始终加载index.html，由Vite的客户端路由机制处理具体路径。 rewrite规则需根据实际Nginx配置调整。
URL 路径： 如果URL使用#号（例如/me/userinfo/#），确保URL以/#/或/index.html/#/结尾，以正确识别hash路由。
通过检查以上四个方面，结合服务器错误日志和网络请求记录（特别是返回404的请求），可以快速定位并解决问题。 特别注意检查网络请求记录中404错误的具体请求路径，这能帮助你精准定位问题所在。
以上就是Vite项目部署Nginx后刷新页面报错：模块脚本加载失败，如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1503851.html
微信扫一扫 
支付宝扫一扫 
