Vite 项目 Nginx 部署后刷新页面报错：如何解决非根路径刷新问题？

vite 项目 nginx 部署后非根路径刷新报错

在 vite 项目打包后使用 nginx 部署时，在非根路径刷新页面可能会出现如下错误：

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.

原因分析

这种情况通常是因为以下原因：

• base 配置不正确：vite 项目中，base 配置指定了打包后的资源的根路径。如果 base 配置不当，在非根路径刷新页面时，资源请求可能会找不到。
• 资源发布不完整：打包后的资源没有完整发布到 nginx 服务器中。
• nginx 配置问题：nginx 没有正确配置重写规则，导致非根路径的请求被重定向到根路径。

解决方案

根据不同的原因，解决方法如下：

• 检查 base 配置：在 vite 配置中检查 base 配置，确保其正确指向打包后的资源的根路径。
• 检查资源发布：确认打包后的资源是否完整发布到 nginx 服务器中，并确保所有必需的文件都已发布。
• 配置 nginx 重写规则：如果使用非根路径，需要配置 nginx 重写规则，将非根路径的请求重定向到正确的资源位置。当 url 使用 # 号时，应配置结尾为 /#/ 或 /index.html#/。

通过检查这些设置并进行适当的调整，可以解决在 vite 项目打包后使用 nginx 部署时非根路径刷新报名的错误。

以上就是Vite 项目 Nginx 部署后刷新页面报错：如何解决非根路径刷新问题？的详细内容，更多请关注硕下网其它相关文章！