LQ博客 www.lqblogs.com
arrows
nav

浅谈VUE打包后白屏,或index.html缓存问题

作者:LQ 来源:原创 发布时间:2019-12-12 浏览量:1007 评论:0 点赞:1

问题

  vue项目打包后,在非首次线上替换vue生成文件时,浏览器在之后首次打开页面,可能出现白屏、缓存旧页面等情况。那么该问题产生原因是什么呢?我们又该如何应对呢?

背景及原因分析

  在使用vue-cli脚手架构建完项目,项目完成后,需打包上线。默认打包方式则是 npm build ,然后项目根目录会生成编译文件。服务端将该文件夹替换线上即可。但是当第nn>1)次上线后,由于在用户端会默认缓存index.html入口文件,而由于vue打包生成的css/js都是哈希值,跟上次的文件名都不同,因此会出现找不到css/js的情况,导致白屏的产生。

  vue build打包后,所生成的css/js的文件名中间会夹杂哈希值,以此来避免缓存问题。但是由于入口文件index.html的名字每次打包后不改变,就导致了index.html在用户端仍然会被缓存下来。那么在服务端更新包之后,由于旧的文件被删除,而index.html所链接的路径依然是旧文件路径,因此会找不到文件,从而白屏。解决方案一般是强制刷新页面或者清除缓存重新加载。

优化方案

方案. meta标签

<!-- 在入口文件index.html中,头部添加meta标签 -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

但是以上方案没有任何效果,浏览器依旧缓存(没有识别#meta标签)解决方案nginx服务器上可以通过给nginx添加禁止缓存的响应头,禁止请求缓存。


location / {
add_header Expires -1;
add_header Cache-Control no-cache;
}


Vue
如果你感觉本文章对你有帮助的话,那就点赞、打赏或订阅一下吧
点赞(1)
打赏
倒踩(1)
关闭 感谢您的支持,我会继续努力
微信支付
支付宝支付
扫码打赏,建议金额1-20元
浏览量(1007)
讨论本篇文章(0)
发表评论

最多访问文章

最新文章