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

问题

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标签

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

location / {

add_header Expires -1;

add_header Cache-Control no-cache;

}