vue webpack 打包 "Cannot read property 'call' of undefined"

vue-cli写的项目,本地测试不会出现,在上传到服务器后,进入页面有时会报错

clipboard.png
这个问题有研究过,有时会请求两次vendor.js,或者请求两次manifest.js

clipboard.png
出现如上图所示的请求情况就会报错,初步估计是缓存的原因,因为manifest,vendor,app三个js要按顺序依次加载,如果vendor加载两次就会报错

有试过可以解决,就是在打完包后,在dist文件夹下的index文件里修改,原本是这样

<script type=text/javascript src=/home_stay/static/js/manifest.6e0c0240c920e78b4f21.js></script>
<script type=text/javascript src=/home_stay/static/js/vendor.5f1b9e59bd38bb0d30c7.js></script>
<script type=text/javascript src=/home_stay/static/js/app.fa4b495fc2bb6f1e6120.js></script></script></body></html>

修改后如下图

<script>
          document.write(`<script type=text/javascript src=/home_stay/static/js/manifest.6e0c0240c920e78b4f21.js?`+Math.random()+`><\/script>;<script type=text/javascript src=/home_stay/static/js/vendor.5f1b9e59bd38bb0d30c7.js?`+Math.random()+`><\/script>;<script type=text/javascript src=/home_stay/static/js/app.fa4b495fc2bb6f1e6120.js?`+Math.random()+`><\/script>;`)
        </script>

也就是把三个打包出来的js(manifest,vendor,app)后加上随机数,不使用缓存,每次都重新加载。
这样做确实是不会报错了,但是有两个新问题
一是每次都要重新加载,用户进入后再进入不会利用缓存,加载速度会慢且消耗流量;
二是每次修改或者更新项目都要打包后再修改,很麻烦,且有点投机取巧的感觉。

所以想请教有没有什么好的办法可以解决这个问题,谢谢了。

阅读 6.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题