Hello! 欢迎来到小浪资源网!


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


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 部署时非根路径刷新报名的错误。

相关阅读