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

已于 2022-10-31 08:53:08 修改
阅读量2.3w 收藏
点赞数 1
分类专栏： 踩坑日记 & Bug收集箱 前端 文章标签： bug javascript vue vite vue3
于 2022-05-27 09:00:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34802028/article/details/124996885
版权

错误信息

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

参考资料

云朵先生_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
客户关系管理系统前端项目：vue3+vite.zip
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者，能够帮助你快速上手Qt并掌握其高级特性。
vite打包 nginx部署报错Expected a JavaScript module script but the server responded with a MIME type of
weixin_42272253的博客
01-11 1286
原因为返回的js文件类型皆为 text/plain，需要设定一个默认值。在http下设置默认值即可。
Failed to load module script: Expected a JavaScript module scriptbut the server responded
m0_64998696的博客
08-25 9036
首先将你原本的镜像在打包的地方尽数删除，将基础镜像也删除，将docker中的none镜像也删除，再使用docker system prune 选择y，然后再对代码进行编译、打镜像，这个错误就不攻自破。当遇见这样的错误有且只有这一个报错时，首先保证代码没有问题，我这里就是代码保证是没有问题的，将源码编译后打成镜像时发生的这种错误，这种就不是所有人的问题，是docker的一个缓存问题。只有这一个错误，在网上搜了两天也没搜到答案，全是修改nginx和base的，我这里可以保证nginx和base没有问题。
使用pdfjs报错：Failed to load module script: Expected a JavaScript module script but the server responded
啃编程
03-16 1699
MIME 类型设置不正确： 服务器返回的文件 MIME 类型不正确。浏览器期望模块脚本的 MIME 类型为 application/javascript。如果服务器返回的 MIME 类型不是这个，浏览器会拒绝加载它，并显示这个错误。
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
12-18
之前编译安装的LNMP环境+phpmyamdin4.02的版本，今天突然出现这个问题：复制代码 代码如下:Fatal error: session_start(): Failed to initialize storage module: files (path: ) in /data/www/phpmyadmin/libraries/session.inc.php on line 83大致意思是session会话初始化的时候储存路径有误！第一反应就是查看php.ini的配置文件中的：复制代码 代码如下:session.save_path = “/tmp”默认前面是加的分号，表示不启用，我之前
vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载
05-13
Vite SVG装载机 Vite 2.x插件可将SVG文件作为Vue组件加载。 < template> < MyIcon> </ template> < script setup > import MyIcon from ' ./my-icon.svg ' </ script > 安装 npm install vite-svg-loader --save-dev 设置 vite.config.js import svgLoader from 'vite-svg-loader' export default { plugins : [ vue ( ) , svgLoader ( ) ] } 与TypeScript一起使用 如果在Typescript项目中使用加载程序，则可能会收到类似Type 'string' is not assignable to type 'Compo
关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “
热门推荐
xing.org1^
09-28 7万+
问题说明 最近刚开始用上vite开发项目，结果就遇到了很多坑。 其中一个是，vite 项目 执行 “vite build” 并部署上线后，在浏览器中访问就会有以下关于路由的奇怪问题： 我们用嵌套路由开发的页面生成的路径，个别菜单在初次加载、或者二次刷新加载时，都会报错如：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/
前端发布部署报错“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
Failed to load module script: Expected a JavaScript module script but the server responded with a MI
锦恢的博客
02-16 2万+
slidev部署踩坑
【问题解决】Failed to load module script: Expected a JavaScript module script but the server respond
qq_17335549的博客
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.
:high_voltage:使用Nuxt 2的Vite体验:test_tube:-Vue.js开发
05-27
:high_voltage:使用Nuxt 2的Vite体验:test_tube:Vite模式是实验性的，许多nuxt模块仍然不兼容如果发现一个错误，请通过最小的再现性报告问题:check_mark:什么在起作用？ 在开发中使用vite基本服务器端渲染基本Hot-Module-Replacement Nuxt插件Nuxt组件Vuex存储页面中间件HTTP模块Axios模块（与--spa一起使用）Composition API内容模块Tailwindcss模块:high_voltage:用法安装包：yarn add --dev nuxt-vite＃或npm i -D nuxt-vite广告
Ajax报错400的参考解决办法
12-02
Failed to load resource: the server responded with a status of 400 (Bad Request) 报错代码为400的错误的原因：基本上都是前台传的数据格式不正确造成的，但是这个格式如何不正确，就得看如何理解这个数据到底是怎么在传的啦。 我这只是简单的记录下，我这个报错400的原因，要是和你的不一样呢，也是有可能的。 写下我的代码报错400，的原因： 前台代码： $.ajax({ url: SUBSYSTEM_APP_NAME + "appportmanage/saveEditAppPortManage", type: "po
module-webserver-nginx:用于将Nginx用作Web服务器的StackHead模块
05-08
StackHead：Nginx Web服务器模块 用于将Nginx用作Web服务器的StackHead模块。 安装 通过ansible-galaxy安装它： ansible-galaxy install getstackhead.stackhead_webserver_nginx 为了将Nginx与一起使用， stackhead__webserver在清单文件设置为： # inventory for integration test --- all : vars : # Use Nginx as webserver stackhead__webserver : getstackhead.stackhead_webserver_nginx hosts : myserver : ansible_host : 123.456.789 # ...
vite-ts-tailwind-starter:自以为是的Vite + Vue 3 + TypeScript + Tailwind CSS入门
05-01
Vite打字稿+尾风启动器 Vite的简单，自觉且可用于生产的项目模板。 有关最新更改，请参见 。 特征 Vue 3 Vuex 4商店（完全键入） 打字稿 带有JIT编译器的Tailwind CSS +已预安装以下插件 @tailwindcss/aspect-ratio @tailwindcss/line-clamp @tailwindcss/typography @tailwindcss/forms PostCSS 8 w / postcss-nesting插件 埃斯林特 更漂亮 别名@到<project>/src 在构建时从package.json版本定义_APP_VERSION 使用新的script setup语法（请参见 ） Cypress.io e2e测试（类似于vue-cli配置） GitHub工作流程 Dependabot 自动化的端到端测试
hbase 启动regionserver日志报错： Wrong FS: hdfs:// .regioninfo, expected: file:///
08-14
NULL 博文链接：https://bnmnba.iteye.com/blog/2322332
微信小程序报错：this.setData is not a function的解决办法
11-28
微信小程序 报错：this.setData is not a function 在page中定义的代码如下，代码会报错：this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data....
个人博客前端项目，使用Vue3+Vite开发, 兼容移动端（响应式）.rar
最新发布
04-29
# 个人博客前端项目，使用Vue3+Vite开发, 兼容移动端（响应式） ### 具有轻量美观流畅等特点 ### 代码中封装了很多组件和动画 ### 目前还未完全开发完毕，正在努力迭代更新中 ## 所使用的依赖包介绍 + 打包工具： `...
my-vue3-vite-project.rar
02-19
my-vue3-vite-project
index-68079a9d.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec. 用 vite
05-24
这个错误通常是由于服务器在返回 JavaScript 模块时的 MIME 类型设置不正确导致的。在 Vite 中，你可以通过配置 `server.strictMIME` 选项来解决这个问题。将其设置为 `false` 可以禁用严格的 MIME 类型检查，例如： ```js // vite.config.js export default { server: { strictMIME: false } } ``` 如果你仍然遇到问题，你可以尝试手动设置服务器响应的 MIME 类型。在 Vite 中，你可以通过使用 `connect` 插件来实现这一点。例如，以下代码将所有 JavaScript 模块的 MIME 类型设置为 `application/javascript`： ```js // vite.config.js import { connect } from 'vite' export default { plugins: [ connect({ middleware(_, res) { res.setHeader('Content-Type', 'application/javascript') } }) ] } ``` 这样做应该可以解决你遇到的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值