vue nginx部署配置解决href = ‘/login路由‘ 跳转404问题

示例场景

html 复制代码

 <a :href=this.repDownloadUrl>下载平台</a>
 <a href="/join" target="_blank">入驻平台</a>
 <a href="/index" target="_blank" class="btn_login" style="color:#fff">

nginx部署前后端项目，当a标签跳转指定路由页面时，前端访问跳转界面报错404，或者location.href = '/login' 跳转报错404

解决方法

cd 至nginx文件中的conf文件
重点：在nginx.conf配置中加入
try_files $uri $uri/ /index.html;

详情nginx配置如下

powershell 复制代码

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            # 打包vue的包路径地址
            root   /file/dist;
            index  index.html index.htm;
            # 防止路由跳转的404问题
            # 解决跳转页面 href = '/路由地址' 跳转404问题
            # 也可解决location.href = '/login' 跳转404问题
            try_files $uri $uri/ /index.html;
        }

       # 接口请求转发
       location ^~ /prod-api/ {
          proxy_set_header Host $http_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;
          proxy_pass http://localhost:8090/;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

配置后重启nginx，访问跳转路径无报错404

vue nginx部署 配置 解决href = ‘/login路由‘ 跳转404问题

示例场景

解决方法

vue nginx部署配置解决href = ‘/login路由‘ 跳转404问题