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

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《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 部署后刷新页面报错：如何解决非根路径刷新问题？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！