使用nginx代理Vue的反向代理

使用nginx的时候，可以不用到tomcat。
1.官网下载nginx：http://nginx.org/en/download.html，我这个边使用的是最新的，1.21.0，版本无所谓。

image.png

下载下来的目录：

image.png

2.测试启动查看是否正常：在此处打开命令行后输入"start nginx" 就可以打开nginx服务了，在任务管理器里会看到2个nginx.exe的任务：

上面是简单的启动nginx.

3.配置nginx:
在nginx的目录里打开conf/nginx.conf文件，找到http 的server并更改如下：

server {
        # 下面这两行 在浏览器表现为localhost:8080，localhost就是这里的server_name,listen就是这个代理端口
        listen       8080; #代理端口 
        server_name  localhost; #代理名称（域名、ip）

       # 这个得配置，项目存放的位置
        location / {
            root   E:/zone/apache-tomcat-7.0.106/webapps/ROOT; #项目存放的地址（当前服务器位置）
            index  index.html index.htm;
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404，应该是可有可无
        }

        # 给项目代理
        # 在这里有一个坑，之前写的/api,即：
        # location   /api { 
        #    proxy_pass http://ip:port/xxx;
        # }
        # 会访问不到，报错404，在/api后面加上反斜杠/就好了
        location /api/ { 
            #这里我不会用转义字符，所以http:后面的两个反斜杠就加了一个空格
            proxy_pass http:/ /ip:port/xxx; #这个是接口访问的地址。
        }

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

4.更改完后 使用命令 "nginx -s reload" 应用配置，就不需要重启了