问题
vue项目打包后，在非首次线上替换vue生成文件时，浏览器在之后首次打开页面，可能出现白屏、缓存旧页面等情况。那么该问题产生原因是什么呢？我们又该如何应对呢？
背景及原因分析
在使用vue-cli脚手架构建完项目，项目完成后，需打包上线。默认打包方式则是 npm build ，然后项目根目录会生成编译文件。服务端将该文件夹替换线上即可。但是当第n（n>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;
}
