nginx配置vue代理

vue 反向代理 nginx.conf 配置文件如下： 

# 荣E通测试环境
server {
        listen       8011;
        server_name  localhost;

        location / {
            root   /usr/local/java/test/realize-master/realize-ui/dist;#vue项目的打包后的dist;
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }

        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        location @router {
            rewrite ^.*$ /index.html last;
        }
        location /prod-api/ { #vue前端所有接口都加上/api/前缀，然后代理到后端接口服务
          rewrite ^/prod-api/(.*)$ /$1 break;
          proxy_pass http://localhost:8012; #访问后端的地址
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-Host $server_name;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          client_max_body_size  1000m;
        }
    }

server {
        listen       8083;
        server_name  localhost;

        location / {
            root   /usr/local/java/dev/dist;#vue项目的打包后的dist;
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }

        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        location @router {
            rewrite ^.*$ /index.html last;
        }
        location /prod-api/ { #vue前端所有接口都加上/api/前缀，然后代理到后端接口服务
          rewrite ^/prod-api/(.*)$ /$1 break;
          proxy_pass http://localhost:8084; #访问后端的地址
          proxy_set_header Host $host;
          proxy_set_header X-Forwarded-Host $server_name;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          client_max_body_size  1000m;
        }
    }