前端发版上线出现白屏问题

aDiaoYa_

已于 2024-03-26 17:27:25 修改

阅读量1.5k

点赞数 10

分类专栏： Vue 文章标签：前端 vue nginx

于 2024-03-26 17:25:20 首次发布

本文链接：https://blog.csdn.net/aDiaoYa_/article/details/137046911

版权

Vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

路由配置问题

问题描述： 在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.js
module.exports = {  
  outputDir: 'dist',  
  filenameHashing: true, // 确保文件名包含hash  
  chainWebpack: config => {  
    config.output  
      .filename(`js/[name].[contenthash].js`)  
      .chunkFilename(`js/[name].[contenthash].chunk.js`);  
  }  
}