【Bug收集箱 · 前端】Vite报错：Failed to load module script: Expected a JavaScript module script but the...

已于 2022-10-31 08:53:08 修改
阅读量2.6w 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 踩坑日记 & Bug收集箱 前端 文章标签： bug javascript vue vite vue3
于 2022-05-27 09:00:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34802028/article/details/124996885
本文解决了一个常见的Vite打包问题：网页加载时出现白屏且控制台提示MIME类型错误。通常此问题出现在使用Python内置服务器进行本地开发时。文章提供了简单的解决方案：将项目部署到正式的服务器环境中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

错误信息

使用 Vite 打包的网页白屏，控制台报错。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/plain”. Strict MIME type checking is enforced for module scripts per HTML spec.

原因

MIME 的类型错误，一般是本地 windows 下开发会遇到的问题。我就是在Windows 下用 Python 内置的 http.server 打开后遇到的。

解决方案

将打包后的文件部署在正式的服务器环境下（如 Nginx、Apache）。
请添加图片描述

参考资料

uniapp - 报错 Failed to load module script: Expected a JavaScript module script but the serve with a M
高级前端工程师
05-07 6126
uni-app，报错，小程序，h5，网页网站，uniapp h5平台，H5端，浏览器报错，样式都乱了，图标大小不一致，样式乱套了，css样式不正常，页面乱了，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 scri
解决 Tomcat 项目中 “Failed to load module script: Expected a JavaScript module script...“ MIME 类型错误
最新发布
码觉客的博客
05-08 2687
Failed to load module script…” MIME 类型错误的核心是服务器没有为.js文件返回正确的头部。对于Spring Boot + 内嵌 Tomcat，推荐通过实现来添加.js的 MIME 映射。对于传统 Spring + 外部 Tomcat，推荐在应用的中添加。如果在应用层面配置后问题依然存在，则需要系统地排查部署、缓存、中间层代理、Filter/Interceptor 等其他可能的干扰因素。通过利用浏览器开发者工具确认实际接收到的响应头，是定位问题的关键第一步。
Failed to load module script: Expected a JavaScript module script but the server responded with a MI
fruge365的博客
03-05 2万+
项目打包报错`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.`
Vue3+vite打包发版项目报错简记：Failed to load module script
kevin_gwc的博客
08-24 3万+
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
Failed to load module script: Expected a JavaScript module script but the server ···报错解决
a_靖的博客
09-12 1万+
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制作一个Vue3项目时，通过浏览器预览结果报错：Failed to load module script...如何解决？
**My Coding Family**
03-12 1095
🏆本文收录于《全栈Bug调优(实战版)》专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “
m0_67392661的博客
03-06 9067
问题说明 最近刚开始用上vite开发项目，结果就遇到了很多坑。 其中一个是，vite 项目 执行 “vite build” 并部署上线后，在浏览器中访问就会有以下关于路由的奇怪问题： 我们用嵌套路由开发的页面生成的路径，个别菜单在初次加载、或者二次刷新加载时，都会报错如：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/htm
vue3 - vite项目打包后访问白屏报错Expected a JavaScript module script but the server responded with a MIME type
高级前端工程师
12-18 7936
vue3，vite，打包build部署报错，页面白屏，vue报错，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 build后访问报错：Expected，vite打包 nginx部署报错，服务器base配置，资源路径
Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”.
浪漫之圣
02-28 1214
vue3+vite打包以后，项目切换路由触发（偶发触发）报: After using vue-router, there is an error in packaging and running # Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”. Strict MIME type checking is enforced for module scripts
前端发布部署报错“Failed to load module script: Expected a JavaScript module script but the server responded”
郭蕾蕾 努力的包子
08-15 2万+
Failed to load module script: Expected a JavaScript module script but the server responded
使用pdfjs报错：Failed to load module script: Expected a JavaScript module script but the server responded
啃编程
03-16 7405
MIME 类型设置不正确： 服务器返回的文件 MIME 类型不正确。浏览器期望模块脚本的 MIME 类型为 application/javascript。如果服务器返回的 MIME 类型不是这个，浏览器会拒绝加载它，并显示这个错误。
Failed to load module script: Expected a JavaScript module scriptbut the server responded
m0_64998696的博客
08-25 1万+
首先将你原本的镜像在打包的地方尽数删除，将基础镜像也删除，将docker中的none镜像也删除，再使用docker system prune 选择y，然后再对代码进行编译、打镜像，这个错误就不攻自破。当遇见这样的错误有且只有这一个报错时，首先保证代码没有问题，我这里就是代码保证是没有问题的，将源码编译后打成镜像时发生的这种错误，这种就不是所有人的问题，是docker的一个缓存问题。只有这一个错误，在网上搜了两天也没搜到答案，全是修改nginx和base的，我这里可以保证nginx和base没有问题。
【问题解决】Failed to load module script: Expected a JavaScript module script but the server respond
热门推荐
有一棵树的博客
11-19 3万+
xxx.86eb4fa7.js:1 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.
Failed to load module script: Expected a JavaScript module script but the server responded with ....
c327127960的博客
02-12 4062
解释一下这段代码，我在打包输出的过程中想看一下打包完的router-index.js文件，所以我对这个文件的命名进行了一个处理，如果是路由文件，则文件名就直接使用 router-index.js，并没有使用哈希值命名，所以在每次打包完之后，浏览器加载路由文件时，会发现文件名称没有变化而沿用缓存中的路由文件，所有会出现，更新的内容没有覆盖上去，并且会出现如上的报错，但是当你清空浏览器缓存，会发现又可以了。这可能是多方面的原因导致的，比如vite.config.ts中的配置原因。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值