前端项目发布到Nginx里报Failed to load module script错误

最新推荐文章于 2025-04-15 15:49:59 发布
最新推荐文章于 2025-04-15 15:49:59 发布
阅读量3.5k 收藏 10
点赞数 14
CC 4.0 BY-SA版权
文章标签： 服务器 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cg_ssh/article/details/140933790

错误信息：

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.

报错原因：

我在项目里使用了 mjs 文件，而ngnix无法识别该类型的文件

      <script type="module" src="../build/pdf.mjs"></script>
      <link rel="stylesheet" href="viewer.css" />
      <script type="module" src="viewer.mjs"></script>

处理方式：

1.在服务器nginx目录 找到conf/mime.types 文件找到 application/javascript 项并添加mjs类型

2.确保nginx.conf里http 里include 了该文件 

 

3.然后执行命令重新载入配置文件或直接重启服务

nginx -s reload

终极踩坑:

按照以上步骤然、并、卵，你猜怎么着：

浏览器缓存搞了我一个小时，想放弃的时候才突然想到会不会是缓存问题........勾上它 F5

起飞~~~~~~~~~~~~~~~~~~ 

cg_ssh
关注
用vite制作一个Vue3项目时，通过浏览器预览结果报错：Failed to load module script...如何解决？
**My Coding Family**
03-12 1089
🏆本文收录于《全栈Bug调优(实战版)》专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
uniapp - 报错 Failed to load module script: Expected a JavaScript module script but the serve with a M
高级前端工程师
05-07 6119
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
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.`
angular 提示 Failed to load module script: Expected a JavaScript module script but the server responde
最新发布
qq_43663215的博客
04-15 1910
angular某个版本script type改成了。把打包好涉及的script type。index.html中。runtime.js中。
vite+vue3打包后部署nginx Failed to load module script，空白页，404，反向代理等问题。
m0_50360903的博客
03-23 3735
vite打包部署项目到nginx可能会遇到的全部问题。
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.报错解决
Failed to load module script: Expected a JavaScript module script but the server responded with ....
c327127960的博客
02-12 4051
解释一下这段代码，我在打包输出的过程中想看一下打包完的router-index.js文件，所以我对这个文件的命名进行了一个处理，如果是路由文件，则文件名就直接使用 router-index.js，并没有使用哈希值命名，所以在每次打包完之后，浏览器加载路由文件时，会发现文件名称没有变化而沿用缓存中的路由文件，所有会出现，更新的内容没有覆盖上去，并且会出现如上的报错，但是当你清空浏览器缓存，会发现又可以了。这可能是多方面的原因导致的，比如vite.config.ts中的配置原因。
vue3 - vite项目打包后访问白屏报错Expected a JavaScript module script but the server responded with a MIME type
高级前端工程师
12-18 7910
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配置，资源路径
解决使用Nginx错误 Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING问题
Bertram的博客
06-23 3160
问题描述： 使用Nginx代理的服务，一直使用正常，突然就访问不了了! 访问报Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING问题 以上问题原因： 当代理文件大小超过配置的proxy_temp_file_write_size值时，nginx会将文件写入到临时目录下（默认为/proxy_temp）。 如果nginx中/proxy_temp过大或者没有权限，就写不进去。 解决方法一： 直接删除Nginx缓存文件，应该就可以访问了：# r
针对 pdf.mjs 文件因 MIME 类型错误导致的 Failed to load module script 问题解决方案
码觉客的博客
03-19 1094
是 ECMAScript 模块（ESM）的专用扩展名，用于明确标识模块化 JavaScript 文件。若项目使用 ESM，需确保服务器正确识别此类型。文件的 MIME 类型，解决模块加载错误。若问题仍存在，建议结合浏览器控制台和 Nginx 日志（，而浏览器要求 JavaScript 模块文件必须为。通过以上配置，Nginx 将正确识别。文件因 MIME 类型错误导致的。问题，以下是基于搜索结果的。）进一步排查路径或缓存问题。的默认行为，避免冲突。若需针对特定路径（如。，需通过上述方案覆盖。
Failed to load module script
SSophia的博客
05-28 273
资源路径问题,请求的是 js 资源, 但是服务器找不到资源,默认返回 html 文件;但是服务器会对资源进行格式校验,然后报错。使用vite build 打包后部署到生产后报这个错误。配置vite.config.js。问题出在打包时候资源路径不对。配置 base为 './ ’
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:解决方法
weixin_43996999的博客
11-06 2115
原本nginx直指向了一个前端项目，后来又加了一个，就直接复制的上一次的，导致变量名重复报的错。在vue项目打包上传至服务器出现的报错。
使用pdfjs报错：Failed to load module script: Expected a JavaScript module script but the server responded
啃编程
03-16 7387
MIME 类型设置不正确： 服务器返回的文件 MIME 类型不正确。浏览器期望模块脚本的 MIME 类型为 application/javascript。如果服务器返回的 MIME 类型不是这个，浏览器会拒绝加载它，并显示这个错误。
Failed to load module script: The server responded with a non-JavaScript MIME type of “text/plain“.
weixin_44493841的博客
05-18 1万+
flask 使用es6语法中 type='module' 报错 报错如下： Failed to load module script: The server responded with a non-JavaScript MIME type of “text/plain”. Strict MIME type checking is enforced for module scripts per HTML spec. 解决办法 在flask中添加代码： import mimetypes # 防止es6语法报错
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没有问题。
vue项目npm run build 部署到nginx Failed to load resource: the server responded with a status of 404 (Not Found)
03-08
### Vue 项目 Nginx 部署解决方案 当遇到 Vue CLI 构建的单页面应用(SPA)部署至 Nginx 后出现404错误的情况，通常是因为Nginx未能正确处理前端路由请求。为了确保SPA能够正常工作，需配置Nginx以重定向所有未知路径回`index.html`文件。 #### 修改 `vue.config.js` 如果项目根目录下存在`vue.config.js`文件，则可以设置publicPath属性来指定公共资源的基础路径[^2]： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-project-name/' : '/' }; ``` 这会使得生产环境下的资源加载地址带上项目的名称前缀，防止跨域问题并减少因路径不匹配引发的404报错。 #### 调整 Nginx 配置 对于Nginx服务器端而言，应当调整站点配置文件中的location部分，使其支持HTML5 History模式下的前端路由规则: ```nginx server { listen 80; server_name localhost; location / { root html/your_project_directory; try_files $uri $uri/ /index.html; # 关键配置项 index index.html index.htm; } } ``` 上述配置中`try_files`指令的作用在于尝试查找具体的URI对应的物理文件；若不存在则返回`index.html`给客户端解析，从而让Vue Router接管后续逻辑跳转操作而不触发实际HTTP请求。 #### 执行构建命令 完成以上更改后，在执行`npm run build`之前建议先清理node_modules缓存以及重新安装依赖包以排除潜在干扰因素[^1]： ```bash rm -rf node_modules/ npm cache clean --force npm install vue-router --save npm install npm run build ``` 最后将生成于dist目录内的静态资源上传至目标主机相应位置即可实现成功部署。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值