记录「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 再次打开页面,问题完美解决!