Vite项目部署Nginx后刷新页面报错：模块脚本加载失败，如何解决？

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模块脚本。

解决方法需要从以下几个方面入手：

1. vite.config.js 中的 base 配置: 如果项目部署在非根路径下（例如/app），则需要在vite.config.js中正确配置base属性。例如：base: '/app/'。 这确保编译后的index.html中所有资源路径都包含正确的 base 前缀。

2. 文件部署: 确认项目文件已完整且正确地发布到服务器的指定目录，并检查文件权限。

3. Nginx 配置： 对于不使用#号的非根路径URL（例如/me/userinfo），需要在Nginx配置中添加rewrite规则，将所有非根路径请求重定向到index.html。 这使得浏览器始终加载index.html，由Vite的客户端路由机制处理具体路径。 rewrite规则需根据实际Nginx配置调整。

4. URL 路径： 如果URL使用#号（例如/me/userinfo/#），确保URL以/#/或/index.html/#/结尾，以正确识别hash路由。

通过检查以上四个方面，结合服务器错误日志和网络请求记录（特别是返回404的请求），可以快速定位并解决问题。 特别注意检查网络请求记录中404错误的具体请求路径，这能帮助你精准定位问题所在。

以上就是Vite项目部署Nginx后刷新页面报错：模块脚本加载失败，如何解决？的详细内容，更多请关注php中文网其它相关文章！