前言

• vue-router有两种模式，hash模式和history模式。
• 直观区别：hash模式url带#号，history模式不带#号。
• hash模式：由于hash值变化不会导致游览器向服务器发出请求，所以可以实现前端路由，无需额外的配置。
• history模式：history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

history模式存在问题

• hash兼容IE8以上，history兼容IE10以上；
• history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误。

history模式下的Nginx配置

    server {listen 9023; # 端口号index index.html; #通过index来访问index.htmlclient_max_body_size 1024m;root /vdd/ynk/gicweb/pcweb;  #静态资源的位置try_files $uri $uri/ /pro-gic-web/index.html; # history模式配置#登录接口location /login {proxy_set_header Host $host; # 传递域名proxy_set_header X-Real-Ip $remote_addr; # 传递ipproxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Scheme $scheme; # 传递协议        proxy_pass http://172.16.22.60:31021;}
}

try_files注意事项，

• /pro-gic-web/index.html,如果有目录或前端，index.html要加上目录或前缀，这里对应的是静态资源地址，否则nginx找不到对应静态资源。
• 如果没有前缀，资源在要目录下，则不需要前缀，直接配置主入口文件，即index.html