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

原创 已于 2022-10-31 08:53:08 修改 · 2.6w 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bug #javascript #vue #vite #vue3

于 2022-05-27 09:00:56 首次发布
本文解决了一个常见的Vite打包问题：网页加载时出现白屏且控制台提示MIME类型错误。通常此问题出现在使用Python内置服务器进行本地开发时。文章提供了简单的解决方案：将项目部署到正式的服务器环境中。
部署运行你感兴趣的模型镜像

错误信息

使用 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）。
请添加图片描述

参考资料

您可能感兴趣的与本文相关的镜像

Python3.11

Python3.11

Conda
Python

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本

解决 Tomcat 项目中 “Failed to load module script: Expected a JavaScript module script...“ MIME 类型错误
码觉客的博客
05-08 3498
Failed to load module script…” MIME 类型错误的核心是服务器没有为.js文件返回正确的头部。对于Spring Boot + 内嵌 Tomcat，推荐通过实现来添加.js的 MIME 映射。对于传统 Spring + 外部 Tomcat，推荐在应用的中添加。如果在应用层面配置后问题依然存在，则需要系统地排查部署、缓存、中间层代理、Filter/Interceptor 等其他可能的干扰因素。通过利用浏览器开发者工具确认实际接收到的响应头，是定位问题的关键第一步。
关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type...
cabinx的博客
08-31 2万+
关于vite build后访问报错：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 a JavaScript modul
如何解决打包报错：Failed to load module script: Expected a JavaScript module script but the server responded
最新发布
从前端设计到后端实现，从云技术到人工智能，这里分享最新的技术见解和实践经验。一起学习，一起进步！
11-04 1360
摘要：本文针对前端项目中常见的打包部署报错"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of 'text/html'"，系统分析了问题原因和解决方案。文章指出该错误通常由路径配置错误、部署目录不完整、服务器路由问题或MIME类型设置不当导致，并提供了详细的排查步骤：检查JS文件路径、验证部署目录结构、配置服务器路由fa
硅谷甄选_代理跨域_真实接口替换mock接口效果
浪漫韫秋
10-11 659
我们请求的路径是带/api的，但是服务器上的请求路径是没有/api的；不信，你就看看下面的图；你不带关键字，代理服务器是不会帮你转发请求，去给你捞数据的；怎么配置代理跨域，可以查看官网上的内容，比照着进行配置；关键字配置是啥意思？就是你的请求路径上要带关键字；就是如图2的位置，这个，倒是TMD很简单的；利用vite的loadEnv加载配置文件。token过期也要await。
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
用vite制作一个Vue3项目时，通过浏览器预览结果报错：Failed to load module script...如何解决？
**My Coding Family**
03-12 1338
🏆本文收录于《全栈Bug调优(实战版)》专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
vue3 - vite项目打包后访问白屏报错Expected a JavaScript module script but the server responded with a MIME type
高级前端工程师
12-18 9045
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 1352
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
vue3+vite - 报错TypeError: Failed to fetch dynamically imported module: xx，vue3项目报错无法获取动态导入的模块，vite报错！
高级前端工程师
07-06 1万+
vue3，vite，vite-plugin-vue，nuxt3，报错，TypeError: Failed to fetch dynamically imported module，无法获取动态导入的模块，vue3打包报错，vue3编译运行报错，如何解决错误，vite build打包以后报错Failed to fetch，Vue3报错详细解决，Vue3+TS错误解决，换浏览器，清缓存，退出登录重新登陆，文件路径没写对，要么是没加组件名的后缀vue，路径写错了，加了setup语法糖导致的这个报错，eslint，
Failed to load module script: Expected a JavaScript module script but the server ···报错解决
a_靖的博客
09-12 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.报错解决
前端发布部署报错“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 8066
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.
uniapp - 报错 Failed to load module script: Expected a JavaScript module script but the serve with a M
06-27
在 UniApp 开发中，遇到 `Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"` 报错，通常是由于模块脚本的加载路径错误或服务器配置不当导致浏览器接收到非预期的 MIME 类型（如 `text/html` 而不是 `application/javascript`）[^1]。 ### 原因分析与解决方案 #### 1. **检查模块导入路径** 确保在项目中引入的模块路径是正确的，并且该路径确实指向一个有效的 `.js` 或 `.mjs` 文件。如果路径错误，服务器可能会返回 404 页面（HTML 内容），从而导致浏览器检测到 MIME 类型为 `text/html` 并抛出错误。 ```javascript // 示例：正确导入本地模块 import myModule from &#39;@/common/myModule.js&#39; ``` 如果使用了动态导入或远程 URL，请确认其有效性： ```javascript // 动态导入示例 const module = await import(&#39;https://example.com/path/to/module.js&#39;) ``` #### 2. **配置服务器 MIME 类型** 如果模块文件已正确部署但浏览器仍报 MIME 类型错误，则需要检查服务器配置，确保 `.js` 文件被正确识别为 `application/javascript`。 ##### Nginx 配置示例： ```nginx location ~ \.js$ { types {} default_type application/javascript; add_header Content-Disposition "inline"; } ``` ##### Apache 配置示例： ```apache <FilesMatch "\.js$"> ForceType application/javascript </FilesMatch> ``` 上述配置可确保服务器将 `.js` 文件以正确的 MIME 类型响应给客户端 [^4]。 #### 3. **检查构建工具配置（Vite / Webpack）** 如果你使用的是 Vite 或 Webpack 等现代前端构建工具，需确保其配置正确处理模块路径和静态资源服务。 例如，在 Vite 中，若你使用了 `base` 配置，应将其设为相对路径 `/`，以避免路径解析错误： ```ts // vite.config.ts export default defineConfig({ base: &#39;/&#39;, }) ``` 此外，确保模块文件未被误编译为 HTML 文件，特别是在使用代码分割或按需加载时 [^3]。 #### 4. **检查 UniApp 编译输出目录** UniApp 默认将构建后的文件输出至 `dist/` 目录。请确认构建过程中没有异常，所有 `.js` 文件都正常生成并放置在正确的子目录下。可以手动访问这些 `.js` 文件的 URL，查看是否返回了预期内容而非 HTML 页面。 #### 5. **跨域问题排查** 如果模块脚本来自第三方服务器，需确保该服务器允许跨域请求，并设置了合适的 CORS 头信息： ```http Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET Access-Control-Allow-Headers: Content-Type ``` #### 6. **清除缓存并重新构建** 有时浏览器缓存可能导致旧的错误响应被保留。尝试清除浏览器缓存、服务端缓存，并重新执行 `npm run build` 构建流程，确保资源更新生效。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值