vue history模式 手机微信分享 安卓机显示404

问题描述跟 vue spa项目，history模式，微信分享时，安卓微信浏览器显示404
]一文说的一模一样，不同的是，我的环境是 nginx 分发到 装有tomcat 8080 端口的服务器上，PC打开是正常的，唯独安卓手机微信浏览器显示404公益页面。

@微雨燕凝霜寒 他检测到了你出现了404页，他马上给你一个帮丢失的孩子找到家的一个页面。很良心，很善良吧，他对公益是做好了，但你的工作要丢了啊。你的页面要是放在公众号里面，一授权就进入了找小孩的页面，你们经理不砍死你就好了。[哭笑][哭笑][哭笑]

百度了很多资料，基本都参考的是官网HTML5 History 模式来设置。

nginx

location / {
  try_files $uri $uri/ /index.html;
}

好吧，我也是按着这个设置。结果reload配置之后，页面出现空白，怎么肥事？
打开network，咦，状态改成200了，好事。但是static路径找不到了，晕，资源加载不出来，怪不得。

又试了好多其他方法，什么设置error_page，发现还是没效果。

后面看了stackoverflow上的问题：Getting Nginx to serve static files from several sources，采纳度最高的答案

location /static/ {
  root /;
  try_files /tmp$uri /srv/www/site$uri =404;
  expires 30d;
  access_log off;
}

发现一点思路，对哦，我可以把/static/单独拎出来做匹配，其他路由都跳到/index.html。巴拉巴拉写下配置。

upstream ups_ucar_wx {
  #ip_hash;
  #consistent_hash $remote_addr;
  server 192.168.8.59:8080;
  #check interval=10000 rise=2 fall=5 timeout=1000 type=http default_down=false;
  #check_http_send "GET /health HTTP/1.0\r\n\r\n";
}

server {
  listen      80;
  server_name   xxx.com;
  charset     utf-8;
  access_log  logs/xxx.access.log  main;
  error_log   logs/xxx.error.log;
  
  #include /etc/nginx/agent_deny.conf;

  location / {
    proxy_pass  http://ups_ucar_wx;
    # 具体做什么，不懂，不过不加会显示400
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 匹配不到的路径，都跳/index.html
    try_files $uri $uri/ /index.html;
  }

  location /static/ {
    root /;
    proxy_pass  http://ups_ucar_wx;
    # 具体做什么，不懂，不过不加会显示400
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 设置过期时间
    expires 30d;
  }
}

重点

  try_files $uri $uri/ /index.html;

  location /static/ {
    root /;
    proxy_pass  http://ups_ucar_wx;
    # 具体做什么，不懂，不过不加会显示400
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 设置过期时间
    expires 30d;
  }

最后，大功告成~~
回家吃饭睡觉~~~
运维大神不要笑，作为一个小前端，运维好多都不懂~~
谁叫人家是甲方爸爸~~

参考资料：
vue spa项目，history模式，微信分享时，安卓微信浏览器显示404
HTML5 History 模式
Getting Nginx to serve static files from several sources
关于html5-History模式在微信浏览器内的问题