这篇文章主要讲解了“vue项目打包后由于html被缓存导致出现白屏如何处理”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue项目打包后由于html被缓存导致出现白屏如何处理”吧！

vue线上的项目修改打包，重新部署后，线上出现了白屏，无法显示

这是因为浏览器缓存了之前的html，用户访问的还是之前的html，但是由于我们重新打包更新了服务器的资源，那么之前的html上引用的资源已经不存在了，所以页面就无法显示出来了。

1. 手动刷新。懂的都都懂，用户自己看到屏幕白茫茫一片，肯定以为网络不好，多刷新几次就出来了。

2. 在html加上 no-cache 等等 meta标签，然后服务器ngix也加伤 no-cache 等不缓存的代码，网上搜一搜：vue打包缓存白屏，会有好多，这里就不多说了，主要是我加了这些东西后跟没加的效果一样，并不能解决，还有可能是项目是放在别人的cdn上，改不了服务器，可能也不会起作用。

3. 代码刷新。通过测试我们可以看到，当出现白屏时，刷新可以使页面恢复正常，那是刷新时绕过了缓存，有兴趣的朋友可以去了解这方面的知识。所以，我们只需要在资源加载出错的时候让页面重新刷新，那么问题就可以解决了。

1. 监听资源加载。在页面加载完成时，使用window自带方法，监听资源加载失败error时，查找失败的资源是否是我们vue项目的资源，只要匹配一个即可通知我们调用刷新页面的方法。

汗颜，我是想监听失败的js、css，奈何一直无法监听到，所以放弃了，有成功的朋友可以交流交流。

2. 在项目main.js内定义一个全局变量

然后我们在index.html内写上监听的方法，此处需注意，如果使用window.onload，那要确保你项目其他地方没有使用这个方法，不然会失效，因为window.onload只能执行一次，多个时只执行最后一个。

或者引入jquery，使用jquery的ready方法，该方法可以多次调用，并且执行的时间节点比onload靠前，节省时间

先在index.html引入jquery

上面使用的是通过在main.js内新增变量去判断，由于我司的页面有很多嵌入app的混合项目，在某个ios内出现了刷新页面时，缓存了之前window的变量，导致判断不准确，所以又想了一个不使用window变量的方法。

思路就是在App.vue 内创建一个元素，然后同样在index.html判断页面是否存在这个元素

在mounted生命周期里执行这个方法，添加一个元素，我们在index.html内通过id判断这个元素

感谢各位的阅读，以上就是“vue项目打包后由于html被缓存导致出现白屏如何处理”的内容了，经过本文的学习后，相信大家对vue项目打包后由于html被缓存导致出现白屏如何处理这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。