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
})
问题分析与解决方法：
根据错误提示和配置，可从以下几个方面排查：
-
检查网络请求： 仔细检查浏览器开发者工具的网络请求，特别是404错误的请求，这些请求路径直接指向问题所在。
-
逐一检查以下几点：
-
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服务器上刷新页面报错的问题。 务必仔细检查每个环节，特别是服务器端配置和网络请求的响应结果。
