vue-cli写的项目,本地测试不会出现,在上传到服务器后,进入页面有时会报错
这个问题有研究过,有时会请求两次vendor.js,或者请求两次manifest.js
出现如上图所示的请求情况就会报错,初步估计是缓存的原因,因为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)后加上随机数,不使用缓存,每次都重新加载。
这样做确实是不会报错了,但是有两个新问题
一是每次都要重新加载,用户进入后再进入不会利用缓存,加载速度会慢且消耗流量;
二是每次修改或者更新项目都要打包后再修改,很麻烦,且有点投机取巧的感觉。
所以想请教有没有什么好的办法可以解决这个问题,谢谢了。