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.”错误。本文将分析此问题并提供解决方法。

问题描述：

在将Vite项目部署到app.xxxx.cn域名后，访问根路径app.xxxx.cn正常。但访问非根路径（例如app.xxxx.cn/me/userinfo）并刷新页面时，出现上述错误。错误信息表明浏览器期望JavaScript模块脚本，但服务器返回了text/html响应。这通常是服务器未正确处理静态资源请求或前端路由配置问题。

示例vite.config.js配置：

export default defineConfig({
  base: './',
  minify: true
})

问题分析与解决方法：

根据错误提示和配置，可从以下几个方面排查：

1. 检查网络请求： 仔细检查浏览器开发者工具的网络请求，特别是404错误的请求，这些请求路径直接指向问题所在。

2. 逐一检查以下几点：

   • base配置： 确认vite.config.js中的base配置是否正确。编译后的index.html中所有引入脚本的src属性都应以./开头，这与base配置相关。base配置错误会导致资源路径错误，引发404错误，最终导致模块加载失败。

   • 部署是否成功： 确保项目已成功部署到服务器，所有静态文件都已正确上传。检查服务器文件完整性。

   • Nginx重写规则： 如果URL链接未使用#作为路由参数，则Nginx服务器需要配置重写规则(rewrite)，将所有请求转发到index.html。这确保单页面应用在非根路径下正常运行。一个典型的配置如下：

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

   登录后复制
   • URL路径： 如果URL链接使用#作为路由参数，则URL结尾应为/#/或/index.html#/，这取决于路由配置方式。

通过以上步骤，结合浏览器开发者工具的网络请求记录，可以有效定位并解决Vite项目在Nginx服务器上刷新页面报错的问题。 务必仔细检查每个环节，特别是服务器端配置和网络请求的响应结果。

以上就是Vite项目部署Nginx后刷新页面报错：如何解决模块脚本加载失败？的详细内容，更多请关注php中文网其它相关文章！