nginx部署vue项目访问tomcat

一、新增nginx配置文件

在/etc/nginx/conf.d目录下，新建web.conf 内容如下
注意前端配置的后端地址为： http://192.168.22.87:9100/
9100为前端端口，在nginx会对相关路径进行转发，如果直接配置后端路径，会报跨域错误

#######################web服务##################################
server{
  listen 9100;
  server_name localhost;

  root /home/workspace/knet-manage/web/dist-test; #vue项目的构建后的dist


  location / {
        try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路>由在nginx中刷新出现404
        index  index.html index.htm;
  }

  #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无>法找到具体的文件
  #因此需要rewrite到index.html中，然后交给路由在处理请求资源
  location @router {
        rewrite ^.*$ /index.html last;
  }


  #测试环境Tomcat
  location ^~ /proxy/{
     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://101.102.188.80:9000/knet-web-manage/manage/api/; #设置监控后端启动的端口
  }

  #开发环境
  location  /knet-web-manage/{
     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://101.102.188.80:9000/knet-web-manage/manage/api/; #设置监控后端启动的端口
  }


  #本地测试服务器
  location ^~ /proxy2/{
     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://192.168.22.87:9000/manage/api/; #设置监控后端启动的端口
  }

}

二、nginx重新加载配置

 nginx -s reload