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

Vite项目部署至Nginx后刷新页面报错：模块脚本加载失败的解决方案

将Vite项目打包后部署到Nginx服务器，访问根路径正常，但访问非根路径（例如：app.xxxx.cn/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模块脚本。本文将分析并解决此问题。

该问题发生在非根路径刷新页面时，根路径访问正常，错误信息明确指出服务器返回了"text/html" MIME类型，而非预期的"application/javascript"。这意味着服务器未能正确处理JavaScript模块文件的请求。

解决方法需仔细检查以下几个方面：

1. base配置: 在vite.config.js中的defineConfig函数内，base属性的配置至关重要。如果base配置为'./'，则生成的HTML文件中的所有资源路径都将相对于项目根目录。如果项目部署在非根路径下（例如/me目录），则base属性应相应地配置为/me/。 务必检查编译后的index.html文件，确认所有<script>标签中的src属性是否正确指向打包后的JavaScript文件。路径错误将导致服务器返回错误的MIME类型。</script>

2. 部署是否成功: 确保项目已成功部署到服务器的指定目录，且服务器能够访问所有必要的静态文件，包括JavaScript模块文件、CSS文件和图片等。任何文件的缺失或路径错误都可能导致404错误，间接引发此问题。

3. Nginx的rewrite配置: 如果URL中不包含#号，则Nginx服务器需要相应的rewrite配置，以确保所有对非根路径的请求都能正确路由到Vite应用。这对于处理单页面应用的路由至关重要。正确的rewrite配置应将所有请求转发到应用的入口文件（通常是index.html）。

4. URL结构: 如果URL使用了#号（例如：/me/userinfo/#/some-path），则确保URL结尾为/#/或index.html/#/，这取决于应用的路由配置方式。

通过检查以上四个方面，结合服务器端的网络请求日志（查看是否存在404错误），即可有效定位并解决问题。仔细排查index.html中资源引入路径以及Nginx配置，即可找到问题的根源。

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