运行Vite项目时控制台出现JavaScript模块MIME类型不匹配错误

常见原因及修复方案 #

• 检查入口文件路径配置
  确认vite.config.js里的build.outDir、server.port等配置是否正确，尤其是入口HTML文件中引用的JS模块路径是否存在拼写错误。比如如果入口JS是src/main.js，HTML里的引用应该是<script type="module" src="/src/main.js"></script>，注意路径开头的斜杠是否正确，避免相对路径导致服务器返回404后重定向到HTML页面，从而返回text/HTML类型。

• 清理Vite缓存
  执行vite clear命令清除Vite的缓存文件，有时候缓存的旧文件会导致资源解析异常。

• 检查本地服务器路由配置
  如果你自定义了Vite的服务器路由（比如使用server.proxy或插件修改路由），确保所有JS模块请求都能正确映射到对应的文件，而不是被重定向到HTML页面。比如某些SPA路由配置错误会导致非根路径的JS请求返回index.html，触发MIME类型错误。

• 验证文件扩展名
  确认你的JS模块文件扩展名是.js、.mjs或.jsx等Vite默认识别的模块格式，不要使用错误的扩展名（比如误写成.html），否则服务器会返回错误的MIME类型。

• 检查静态资源目录配置
  如果你的JS文件放在public目录下，确保引用路径正确，Vite对public目录下的资源会直接映射到根路径，比如public/js/app.js应该用/js/app.js引用，不要带public前缀。

提示：可以在浏览器开发者工具的Network标签下查看报错的JS请求的响应内容，如果返回的是HTML页面（比如index.html），说明请求路径错误导致服务器返回了HTML而不是JS文件，这时候重点排查路径配置。

内容的提问来源于stack exchange，提问作者מייל אירועים