Vite项目Nginx部署刷新报错解决：模块脚本加载失败

Vite项目部署到Nginx后刷新页面出现“模块脚本加载失败”错误？本文针对Vite项目部署在Nginx服务器后，访问非根路径刷新页面报错的问题，提供详细的解决方案。 问题通常源于服务器未正确处理静态资源请求或前端路由配置错误，导致浏览器期望JavaScript模块脚本，却收到text/html响应。文章将分析`vite.config.js`的`base`配置、部署完整性、Nginx重写规则以及URL路径等方面，并结合浏览器开发者工具的网络请求，帮助您快速定位并解决此类问题，确保您的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部署刷新报错解决：模块脚本加载失败》的详细内容，更多关于的资料请关注golang学习网公众号！