目录
路由配置问题资源缓存问题首屏加载过慢
：喂，你的页面白啦！
出现上线白屏的问题有很多，如：配置错误、缓存问题、浏览器兼容问题，根据不同情况去解决。
路由配置问题
问题描述： 在vue开发的前端网页上线后，出现白屏，刷新页面报404错误。
问题分析： 项目上线之后出现白屏，且刷新之后也找不到资源，服务器静态资源文件加载失败，出现这种情况，通常是路由配置的问题。
解决方案：
配置路由：在vue-router的配置中设置mode为history模式（history模式：当用户在地址栏中输入或刷新页面时，浏览器会向服务器发送关于路径的请求），在服务器端配置URL重写规则，即：在Nginx中使用try_files指令，将所有路径都重定向到入口文件（比如index.html），这样即使用户在地址栏中输入或刷新页面，服务器也会正确返回入口文件，而不会出现404错误。
// vue-router配置const router = new VueRouter({ mode: 'history', routes: [...]});// nginx配置location / { root ... index ... try_files $uri $uri/ /index.html;}location @router { rewrite ^.*$ /index.html last;}资源缓存问题
问题描述： web页面白屏，需要清除缓存数据重新加载才能正常访问。单页面的项目，客户不想每次发版都刷新，也不希望每次都重新加载资源文件（即使是缓存也需要刷新和加载）。
问题分析：
在首次上线项目的时候，build生成的资源文件直接放到服务端上线即可。但之后上线，在客户端会默认缓存index.html入口文件，但vue打包生成的css/js都是hash值，跟上次的文件名都不一样，因此会出现找不到css/js的情况，导致出现白屏的问题。
解决问题： 发版后前端页面白屏，通过刷新才能访问前端页面。我个人觉得这个问题无法解决，因为不管怎么做，服务器资源发生变化了，在web页面更新资源的时候都需要一定的缓冲时间。
优化方案：
1、配置资源缓存
确保index.html不被缓存，这样每次用户访问时都会从服务器获取最新版本。在index.html文件的meta标签中添加缓存控制信息，在服务端的响应头中设置合适的缓存过期时间。对index.html入口文件不缓存，css/js资源设置缓存过期时间。
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" /><meta http-equiv="Cache" content="no-cache">// nginx配置#为了解决线上发布新版本后访问前端页面出现短暂性白屏问题，就是把缓存给禁用掉location = /index.html { add_header Cache-Control "no-store, no-cache, no-transform, must-revalidate, max-age=0"; add_header Pragma "no-cache"; add_header Expires "0";}location / {#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 try_files $uri $uri/ @router; index index.html index.htm;}#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件#因此需要rewrite到index.html中，然后交给路由在处理请求资源location @router { rewrite ^.*$ /index.html last;}2、增加版本号或时间戳到资源文件名
通过在构建过程中将版本号或时间戳添加到资源文件名中，可以避免浏览器加载旧的缓存资源。
// vue.config.jsmodule.exports = { outputDir: 'dist', filenameHashing: true, // 确保文件名包含hash chainWebpack: config => { config.output .filename(`js/[name].[contenthash].js`) .chunkFilename(`js/[name].[contenthash].chunk.js`); } }首屏加载过慢
问题描述： 用户打开页面，出现长时间的白屏，特别是对于单页面应用来说。
问题分析：
出现首页长时间白屏的原因有很多：
1、首页需要加载大量的资源或依赖
2、服务器请求速度太慢
3、首页的样式太复杂，需要渲染很长时间
4、浏览器兼容问题
优化方案：
1、代码拆分+按需(懒)加载：将页面依赖的资源进行代码拆分，通过按需加载或懒加载的方式，延迟加载非必要的资源，只有当用户需要访问到某个模块的时候再去加载对应的资源。
2、预加载资源：通过标签来预加载关键资源，提前加载必要资源。
3、CSS优化：可以通过css预编译器来提高css代码的复用性，避免使用过多的CSS样式和复杂的选择器，尽量减少页面重绘和重排的次数，优化CSS文件加载和解析速度。
4、异步加载脚本：将JavaScript脚本放在页面底部或使用defer、async属性进行异步加载，避免脚本阻塞页面渲染。
5、服务器性能优化： 对服务器进行性能优化，如：CDN加速、启用Gzip压缩、配置合适的缓存策略等，提高资源加载速度。
6、服务端渲染：对于单页面应用，考虑使用服务端渲染(SSR)技术，在服务器端生成页面的HTML内容，减少客户端渲染时间，加快首屏加载速度。
7、缓存优化：利用浏览器缓存机制和服务端缓存技术，减少重复请求，加快页面加载速度。
参考文章：
彻底解决前端发版白屏问题和解决方案
【优化】vue项目缓存引发的白屏
灰度发布、蓝绿部署、金丝雀都是啥？
Vue 项目中首页长时间白屏的原因及解决方法