Vue应用新标签页打开链接时Nginx重定向异常求助

在Windows环境部署了基于Nginx、Node.js后端的Vue应用，网页内按钮点击后会在新标签页打开对应链接，但当前Nginx配置无法正确重定向URL。附上同事留下的nginx.conf配置，求解决方法。

worker_processes  1;

events {
    worker_connections  1024;
}

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

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    server {
        listen  81  default_server;
        listen [::]:81  default_server;
        server_name 192.168.1.2;
        
        
        root   "D:\\Workspace\\build\\frontend\\dist";
        index  index.html index.htm;
        
        location /socket.io {
                proxy_pass http://192.168.1.2:7777;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
                proxy_set_header Host $host;
        }
        
        location /api {
            # a bunch of boilerplate proxy configuration
            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_pass http://192.168.1.2:7777;
        }
    
        location / {
            try_files $uri $uri/ /index.html;
            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_pass http://192.168.1.2:9999;
        }

        error_log  "D:\\\\Workspace\\\\\\build\\\\\\nginx\\\\\\fe.log";
        access_log "D:\\\\Workspace\\\\\\build\\\\\\nginx\\\\\\fe-access.log";
    
        #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;
        }
    }
}

当前配置的核心问题是location /块规则冲突：你已经指定root指向Vue打包后的静态文件目录，却又配置proxy_pass转发到9999端口，导致Nginx路由逻辑混乱，引发链接重定向异常。

修复步骤 #

• 清理冲突的location /配置
  既然前端静态文件由Nginx直接托管，无需再代理到9999端口。删除location /内所有proxy_pass相关配置，仅保留适配Vue路由的try_files规则：

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

• 匹配Vue路由模式
  如果Vue用的是history模式，当前try_files规则已能适配；如果是hash模式，该规则同样有效，无需额外调整。

• 检查链接跳转逻辑

  • 若链接指向前端路由（如/dashboard），Nginx会正确返回index.html，由Vue路由处理跳转；
  • 若链接指向外部域名或后端接口，确保是完整URL（如http://xxx.com/api/xxx），或后端接口已通过location /api规则正确代理到7777端口。

• 重启Nginx生效
  在Windows命令行执行：

  nginx -s reload
  

完整修复后的nginx.conf #

worker_processes  1;

events {
    worker_connections  1024;
}

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

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    server {
        listen  81  default_server;
        listen [::]:81  default_server;
        server_name 192.168.1.2;
        
        root   "D:\\Workspace\\build\\frontend\\dist";
        index  index.html index.htm;
        
        location /socket.io {
                proxy_pass http://192.168.1.2:7777;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
                proxy_set_header Host $host;
        }
        
        location /api {
            proxy_http_version 1.1;
            proxy_cache_bypass $http_upgrade;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_pass http://192.168.1.2:7777;
        }
    
        location / {
            try_files $uri $uri/ /index.html;
        }

        error_log  "D:\\\\Workspace\\\\\\build\\\\\\nginx\\\\\\fe.log";
        access_log "D:\\\\Workspace\\\\\\build\\\\\\nginx\\\\\\fe-access.log";
    
        #error_page  404              /404.html;

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

内容的提问来源于stack exchange，提问作者kashyap