Vue History模式的Nginx配置

深海蓝山2023-11-22 11:13

前言

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

history模式存在问题

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

history模式下的Nginx配置

bash 复制代码

    server {
        listen 9023; # 端口号
        index index.html; #通过index来访问index.html
        client_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; # 传递ip
            proxy_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