Vue3+vite打包发版项目报错简记：Failed to load module script

项目场景：

近期做一个单点登录项目，vue3+vite4打包项目，用nginx做二级目录代理托管项目。

---

问题描述

打包好项目发布上传到 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
这个错误提示的意思是：网页中使用了模块脚本（module script），但服务器返回的 MIME 类型是 “text/html”，而不是 JavaScript 类型。根据 HTML 规范，严格的 MIME 类型检查会对模块脚本进行强制执行。

---

原因分析：

这种报错信息通常发生在以下情况：

1. 服务器器没有正确设置响应头，导致返回的文件类型不正确。
2. 网页中引用的模块脚本文件路径不正确或者该文件不存在。

通常的排查解决方案也是：

1. 针对问题1，检查服务器端是否已经将响应头设置为正确的 MIME 类型。例如，在 Apache 服务器上，你可以通过编辑 “.htaccess” 文件或者在 Apache 配置文件中添加以下代码来设置 MIME 类型：

AddType application/javascript .js

2. 针对问题2，检查网页中引用的脚本文路径是否正确。

经过对项目的分析，基本排除了以上两种问题的可能。最后梳理了下nginx的配置，找到原因，是 nginx 二级目录代理的问题，检查Nginx的配置文件后可看到：

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

而在项目中的vite配置中，我将base设置为"/";

export default defineConfig({
  base: "/",
  ...
})

---

解决方案：

其实最终的解决方法也很简单，将nginx转发的location和项目中vite配置文件中的 base 设置保持一致即可，这里我将目中vite配置文件中的 base设置为 login，就不修改nginx配置了。问题完美解决。

export default defineConfig({
  base: "login",
  ...
})