记录「Failed to load module script」错误的解决方案

在本地运行良好的 VuePress 项目, 部署到服务器之后侧边栏无法点击,查看浏览器的「控制台」 发现了如下报错:

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.

根据报错内容大概能明白,服务器把一个应该以 application/javascript 方式返回的 JavaScript 文件,错误的以 "application/octet-stream" 的方式进行了返回。根据浏览器的规则,对于这种「货不对板」的信息被认为是危险的,所以直接就不处理了。也就是说页面中有 JavaScript 文件没有加载成功。

既然是服务器的问题又是一个纯静态的页面,那么十之八九和 Nginx 脱不了干系。首选能想到的就是 Nginx 的 JavaScript 文件 MIME 映射出现了问题。

去 Nginx 配置文件中找到 mime.types 文件的存放路径为 /www/server/nginx/conf/mime.types

打开 mime.types 文件,修改 application/javascript js;application/javascript js mjs;

重启 Nginx 再次打开页面,问题完美解决!

全部评论(2)
必填
必填,不公开
我信任你,不会填写广告链接
收起
看到你的文章,感觉很不错,想与你友情链接。
2022年11月02日 01:04
回复
必填
必填,不公开
我信任你,不会填写广告链接
收起
萧俊介 说:
抱歉,我只和非技术博客互加友情链接~
2022年11月02日 10:03
SunSeekerX 说:
博客是自己开发的吗,挺好看的,但是没有兼容移动端吗?
2022年10月27日 20:46
回复
必填
必填,不公开
我信任你,不会填写广告链接
收起
萧俊介 说:
对,博客是自己开发的,至于为什么没有兼容移动端,一来是没时间,还有就是想之后学了 less 重构的时候一并处理。并且,我自己的习惯是在手机端用 RSS 来阅读,所以就没有太在意。
2022年11月01日 10:28