Vite 项目 Nginx 部署后刷新页面报错：如何解决非根路径刷新问题？-js教程-PHP中文网

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

心靈之曲

发布： 2024-11-15 18:13:46

原创

1171人浏览过

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.

登录后复制

原因分析

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

妙刷AI

美团推出的一款新奇、好玩、荒诞的AI视觉体验工具

查看详情

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

解决方案

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

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

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

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