vue-nginx前后端分离部署方法

使用vue前后端分离部署时，若前端与api不在同一个域，那么会遇到很多的问题（比如跨域引起的问题）。但是我们可以采用nginx反向代理的方式，解决这个烦恼。

nginx主要配置内容如下：

        location / {
            root   D:/thSites/xbjs.web/dist;
            index  index.html index.htm;
	}
	location ~ ^/(api|css|font-awesome|js|images|)/  {
		proxy_redirect off;
		proxy_set_header Host $http_host;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header Upgrade $http_upgrade; 
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass http://127.0.0.1:8080;
	}

如上，后台api的路由，如/api/xx 使用nginx反向代理至127.0.0.1:8080即可解决。

疑问：

1、反向代理时，被代理的路径在api服务器如何对应呢？

解析：

比如api的路径是/api/user/add，nginx配置中将/api/反向代理到127.0.0.1:8080，那么在vue中调用api时，路劲应为/api/user/add，而非/api/api/user/add