Vite项目部署到Nginx非根路径刷新报错Failed to load module script的解决方法

在使用Vite构建项目并部署到Nginx非根路径时，可能会遇到刷新页面后报错“Failed to load module script”的问题。这会影响用户体验，下面为大家介绍解决此问题的方法。

了解问题产生的原因。Vite项目采用了ES模块的方式加载资源，当在非根路径下刷新页面时，浏览器会按照当前路径去请求资源，导致模块脚本加载失败。

解决此问题的第一步是修改Vite的配置文件。在项目的vite.config.js中，找到base选项。如果没有该选项，则手动添加。将base的值设置为部署到Nginx的非根路径，例如部署到“/myapp”路径下，则设置为base: '/myapp'。这样Vite在构建项目时，会将资源路径都调整为以该路径为基础。

接下来，需要配置Nginx。打开Nginx的配置文件，找到对应的server块。在location块中，添加try_files指令。假设部署路径为“/myapp”，可以这样配置：

location /myapp {
    try_files $uri $uri/ /myapp/index.html;
}

这个配置的作用是，当请求的资源不存在时，会尝试返回部署路径下的index.html文件，从而确保页面能够正确加载和渲染。

还需要注意的是，如果项目中使用了路由，并且路由模式为history模式，也需要进行相应的调整。确保路由在非根路径下能够正确匹配和跳转。

完成以上配置后，重新构建Vite项目，并将构建后的文件部署到Nginx的指定非根路径下。然后重启Nginx服务，再次访问项目页面并刷新，此时应该就不会再出现“Failed to load module script”的报错了。

在实际部署过程中，可能还会遇到其他问题，比如资源加载顺序、缓存问题等。需要根据具体情况进行分析和解决。通过正确配置Vite和Nginx，能够确保项目在非根路径下稳定运行，为用户提供良好的访问体验。