vue 项目从 pre 环境上到正式环境后,在一些同事电脑中出现问题。

在一个同事电脑的 chrome 浏览器中,从租户切换到管理员账户后,点击侧边栏,逐个进入新开发的页面(新增加的路由、新增加的页面),页面空白没有任何内容,但是控制台中没有任何报错,必须刷新一下才有内容。且该问题只在他的 chrome 浏览器中出现,其他浏览器没有问题。

在另一个同事电脑中,不用切换账户、不用退出登录,关掉当前页面后,重新从该项目入口进入后,点击侧边栏中的新开发页面,也出现页面空白问题,刷新浏览器后页面正常。

在其他一些人的电脑中就没有该问题,并且该问题只在正式环境出现,pre 环境所有人浏览器都没有问题。

在有问题的浏览器中查看,打包后的 /static/js 目录中的 app.xxxxxxxx.js,在出现问题前后(浏览器刷新前后),是不一样的。也就是刷新之前可能访问的是旧页面,请求了旧的 js 文件,刷新后访问的是新页面。

判断可能是缓存的问题。

尝试修改正式环境的 Nginx 配置文件,设置为不缓存html文件。

网上搜索应该这样修改配置文件:

server {
  listen 80;
  server_name test.exmaple.cn;

  location / {
    if ($request_filename ~* .*\.(?:htm|html)$)  # 设置页面不缓存以 html、htm 结尾的文件
    {
      add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
    }

    root /web/;
    index index.html;
    try_files $uri $uri/ /index.html =404;
  }
}

修改后,查看正式环境恢复正常。

Logo

前往低代码交流专区

更多推荐