浏览器控制台报错Failed to load module script:解决方法

 更新时间:2022年11月11日 16:03:22   作者:Xmo  
这篇文章主要为大家介绍了浏览器控制台报错Failed to load module script:解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

错误

用nginx做vue3+vite2代理的时候出现了以下的报错

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.

原因

经检查,出现这种状况是因为我的项目二级目录和nginx转发的目录不匹配。 在nginx配置中,我是这样写的

location /h5-page {
  try_files $uri $uri/ /jd-h5/index.html last;
}

而在vite配置中,我将base设置为h5-page;

export default defineConfig(({ mode }) => ({
  base: '/h5-page/',
}));

由于我转发的location和目录的base都设置为h5-page,但是我却实际上将打包好的文件放在了jd-h5这个目录中,这让nginx无法准确定位到文件因而产生了上述的报错;

解决方法

解决方法也很简单,将不匹配的部分修正即可,我将目录重命名为h5-page,然后修改nginx配置。

location /h5-page {
  try_files $uri $uri/ /h5-page/index.html last;
}

总结

用二级目录托管项目,如果不想造成混淆和报错的话,应当严格遵照 目录-转发地址-项目base 统一的写法。

以上就是浏览器控制台报错Failed to load module script:解决方法的详细内容,更多关于浏览器控制台报错解决的资料请关注脚本之家其它相关文章!

相关文章

  • nginx实现动静分离的方法示例

    nginx实现动静分离的方法示例

    Nginx的静态处理能力很强,但是动态处理能力不足,因此,在企业中常用动静分离技术,本文就详细的介绍一下如何使用,感兴趣的可以了解一下
    2021-11-11
  • 配置nginx 重定向到系统维护页面

    配置nginx 重定向到系统维护页面

    今天抽时间给大家普及nginx 重定向到系统维护页面的配置内容,nginx重定向问题说起来也很简单,因为重定向后直接跳转到静态页面,不需要后续操作和记录,所以直接301永久重定向。今天简单给大家介绍配置方法,一起看看吧
    2021-06-06
  • nginx+tomcat实现Windows系统下的负载均衡搭建教程

    nginx+tomcat实现Windows系统下的负载均衡搭建教程

    下面小编就为大家分享一篇nginx+tomcat实现Windows系统下的负载均衡搭建教程,具有很好的参考价值,希望对大家有所帮助
    2017-12-12
  • Nginx配置Basic Auth登录认证的实现方法

    Nginx配置Basic Auth登录认证的实现方法

    这篇文章主要介绍了Nginx配置Basic Auth登录认证的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 使用supervisor管理nginx+tomcat容器的方法示例

    使用supervisor管理nginx+tomcat容器的方法示例

    这篇文章主要介绍了使用supervisor管理nginx+tomcat容器的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 在CentOS 7上进行 Nginx安装教程

    在CentOS 7上进行 Nginx安装教程

    这篇文章主要介绍了在CentOS 7上进行 Nginx安装教程,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • Nginx实现跨域使用字体文件的配置详解

    Nginx实现跨域使用字体文件的配置详解

    这篇文章主要给大家介绍了关于Nginx实现跨域使用字体文件的配置方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • Nginx缓存Cache的配置方案以及相关内存占用问题解决

    Nginx缓存Cache的配置方案以及相关内存占用问题解决

    这篇文章主要介绍了Nginx缓存Cache的配置方案以及相关内存占用问题解决,Cashe配置最主要的还是需要注意内存资源的使用问题,需要的朋友可以参考下
    2016-01-01
  • Nginx服务器进程数设置和利用多核CPU的方法

    Nginx服务器进程数设置和利用多核CPU的方法

    这篇文章主要介绍了Nginx服务器进程数设置和利用多核CPU的方法,这样便可以更大限度地提高Nginx运行效率,需要的朋友可以参考下
    2015-08-08
  • nginx作grpc的反向代理踩坑总结

    nginx作grpc的反向代理踩坑总结

    nginx是一款高性能的web服务器,常用于负载均衡和反向代理,本文主要介绍了nginx作grpc的反向代理踩坑总结,感兴趣的可以了解一下
    2021-07-07

最新评论