这次的重点不是讲述如何安装nginx，不是在服务器上单独的部署一个前端项目，这样的教程网上很多。重点是当有多个前端项目部署在服务器上时（每个项目一个单独的文件夹），怎么取配置nginx和前端打包文件！！
首先，让我们先考虑如下需求，我们的前端项目很多，但是都部署在相同的服务器111.1.1.1:8880上面，那么我们区别不同的项目可能需要使用类似于111.1.1.1:8880/app1/、111.1.1.1:8880/app2/的方式。这个时候前端和后端该如何配置呢？
1.前端配置
这时候有两个配置项不得不提，分别是base和publicPath。base是针对项目路由url来设置，例如当你设置base："/demo/"，那么你在输入url的时候就需要输入localhost:8000/demo/（本地）才能访问到项目，所以base就是项目的基础路径的设置。
publicPath是webpack打包时候的配置，其主要作用是什么呢？我们在打包后，打开里面的index.html都会看到如下：
这就是publicPath产生的效果，这里设置的就是“./”，这是一个相对路径，意思是从111.1.1.1:8880/demo/（服务器）路径的找umi.xxx.js，如果没有那就会报资源找不到的错误。
2.在nginx设置，也是会设置两个地方。
假设前端项目在/your address/demo/下，那么在nginx中需要配置的地方，nginx的部署操作这里就不做阐述，网上很多教程，但是很多都只介绍了单项目的部署方法。
配置1 代理到你项目所在的文件
location /demo/ {
root /your address/;
index index.html index.htm;
}
配置2 你后端服务部署的地址
location /xxx/ {
proxy_pass http://your real url/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
记住你的需求，配置了多个项目！
（1）先看 配置1 代理流程
从图上可以看出，当你设置 location /demo/ 后，会根据 /demo/ 来定位项目所在位置，那么问题来了，这个demo是什么时候设置或者说什么怎么确定使用这样一个名字呢？ 没错，在前端部署设置过base这个配置项，配置的demo这个不仅仅是区分项目的关键，也是nginx重定向项目位置的关键词。同时，这里需要注意，location /demo/重定向的时候，会自动在 /your address/后面拼接上/demo/ ，所以不用写成/your address/demo/。
也有人会问，我没设置过这个，怎么也能跑起来呢？仔细回想一下，你设置的nginx中是不是如下设置的：
location / {
root html/dist/;
index index.html index.htm;
}
在你未设置base时候，默认的是“/”。而location / 表示的所有项目都会走这个重定向，那么也就不满足我们的需求了。
（2）下面说说配置2，配置2实际上是对跨域的设置。这里只需要注意proxy 后面的地址是否以/结尾。有无/表达的含义是不同的。
在nginx中配置proxy_pass代理解决跨域问题时，如果在proxy_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径。假设下面四种情况分别用 111.1.1.1/proxy/demo进行访问。可以参考blog.csdn.net/weixin_4387…
第一种：
location /proxy/ {
proxy_pass http://127.0.0.1/;
}
代理到URL：http://127.0.0.1/demo
第二种（相对于第一种，最后少一个 / ）
location /proxy/ {
proxy_pass http://127.0.0.1;
}
代理到URL：http://127.0.0.1/proxy/demo
第三种：
location /proxy/ {
proxy_pass http://127.0.0.1/aaa/;
}
代理到URL：http://127.0.0.1/aaa/demo
第四种（相对于第三种，最后少一个 / ）
location /proxy/ {
proxy_pass http://127.0.0.1/aaa;
}
代理到URL：http://127.0.0.1/aaademo
新人首发！如果有不对，请大佬批评指正！
