vue.js项目打包到正式环境报错 webpackJsonp is not defined 是怎么回事呢?

vue项目打包发布到生产环境后,刷新页面有时候会发现页面加载不出来,然后f12查看,返现如下错误:

图片描述

最后发现导致问题的原因是——vendor.xxx.js文件依赖manifest.xxx.js里面的webpackjsonp函数,由于vendor.xxx.js优先于manifest.xxx.js文件加载,所有才导致此错误。

图片描述
注:上图是出现错误webpackJsonp is not defined的请求详细(menifest.xxx.js文件出现了两次)

但是有一个奇怪的问题是,上图的manifest.xxx.js文件出现了两次,只不过第一次出现的文件没有webpackjsonp函数,如果未出现webpackJsonp is not defined错误时,对应的请求列表里面,manifest.xxx.js只会出现一次!

问题找到了,主要是因为vendor.xxx.js优先于manifest.xxx.js加载导致,该如何处理这个问题呢?

注:本地开发环境测试环境很难复现这个问题,有办法么?

阅读 18.3k
11 个回答

这是服务器那边 设置缓存了把 第一次进入应该是没有问题的把

换一下webpack.config.js中CommonsChunkPlugin的生成顺序试下

同样遇到了这个问题,还没有解决方法。。

这个问题是偶尔出现,有时候半天不出来一次,有时候10次刷新有三四次出现这个情况

网上查阅资料都是说公共文件manifest.xxx.js 要先vendor.xxx.js被加载,我看了打包之后的index.html文件,manifest.xxx.js确实是在vendor.xxx.js之前被引入的。

按理</script>引入的js文件是自上而下加载的,但是不知道为什么就出现了楼主你截图中的情况,vendor.xxx.jsmanifest.xxx.js被加载了。似乎变成了异步加载...

或许熟悉vue-cli和webpack相关配置,能够找到关于异步加载的设置项

新手上路,请多包涵

同样是类似问题,但是我的manifest.xxx.js读取的并不是npm run build里生成的manifest.xxx.js,所以显示404错误导致webpackJsonp is not defined,有人有解决方法么

我也是和楼主一样的问题啊
有啥解决办法吗

新手上路,请多包涵

想问一下,这个问题解决了没。能说说解决方案么

新手上路,请多包涵

同上,解决了的哥们晒下方案呗

都tm骗人的,进入打包后的vender文件,判断webpackJsonp是否存在,不存在强制刷新页面,简单粗暴

先检查一下是不是报某些文件404的错误?正式环境是不是项目部署在了不同的服务器?服务器在负载均衡的时候是会访问不同IP地址的文件,所以项目需要在本地打包好了。要保证部署在不同IP地址正式环境的项目中构建好的文件名是一致的,这样就不会出现访问不到的问题

推荐问题
宣传栏