Vite 项目打包后非根路径刷新出现 \"Failed to load module script\" 错误：如何解决？

珍惜时间，勤奋学习！今天给大家带来《Vite 项目打包后非根路径刷新出现 \"Failed to load module script\" 错误：如何解决？》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

解题：Vite项目打包后在非根路径刷新页面出现的 Failed to load module script 错误

在 Vite 项目中，打包后部署到 Nginx 服务器时，在非根路径刷新页面可能会遇到 "Failed to load module script" 错误。

该错误提示表示服务器响应的 MIME 类型为 "text/html"，而模块脚本预期的是 JavaScript 模块脚本。

错误原因及解决方法：

根据错误信息和问题描述，可以推测以下几个原因：

1. base 配置不正确

base 配置用于指定构建后资源的根路径。如果不正确配置，会导致资源加载出现问题。请根据实际情况配置正确的 base 值。

2. 部署失败

请确保 Vite 项目已成功部署到 Nginx 服务器。检查服务器日志或使用工具 (如 cURL) 验证资源是否已正确部署。

3. Nginx 重写配置

如果链接不包含 "#" 号，需要在 Nginx 中配置重写规则，将所有请求重定向到根路径。

4. "#" 号结尾问题

如果链接使用 "#" 号，结尾应为 /#/ 或 /index.html#/，确保 Nginx 重写规则已正确处理此类路径。

排查步骤：

1. 检查 app.xxxx.cn/me/userinfo 路径下是否出现 404 错误请求。
2. 确认构建后的 index.html 文件中，引入的脚本路径是否以 ./ 开头。
3. 验证项目是否已成功发布到服务器。
4. 检查 Nginx 重写规则是否已正确配置，是否包含上述规则。

以上就是《Vite 项目打包后非根路径刷新出现 \"Failed to load module script\" 错误：如何解决？》的详细内容，更多关于的资料请关注golang学习网公众号！