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错误的具体请求路径，这能帮助你精准定位问题所在。
