nginx配置多个前端项目，使用同一个后端

这几天一直在搞nginx配置的东西，踩了很多坑，特此记录。
前后端分离的项目有两种部署方案，第一种是把前端打包好的dist文件夹放在后端的static下面，然后打包后端，在服务器运行后端的这个jar包，没什么好说的。
第二种是使用nginx配置，这里所讲的是使用第二种方案。
  本项目开发框架：
    后端：SpringBoot+JPA
    前端：Vue+Element-UI

• 1.首先先把后端打包运行起来
  
  我已经运行了，顺便说一下停止运行的方法
  
  我把jar放在了tomcat目录下的webapps，下面把jar运行起来，可以看到8080端口已经被占用了，运行成功。
  
  有什么问题可以查看nohup.out的日志—vi nohuo.out。我这边启动成功。
  
  2.打包第一个前端项目
    打开控制台，直接 npm run build ，之后会生成一个dist文件夹
    配置nginx
  打开conf目录下的nginx.conf，编辑框中如下内容，注意找准文件所在位置
  
  下面解决跨域问题，我们可以看到所有的请求你是找不到后端的，后端运行在8080端口，下面就通过配置使前后端联系起来。
  
  
  然后再nginx的sbin目录下重新加载一下。
  

配置一个前端项目就搞定了。

3.配置第二个前端项目
照常npm run build 打包好项目
同样配置的时候注意文件所在的位置。

使用alias注意最后一定要有 / 。
最重要的一点，前端打包生成的index.html也要修改，因为你的定位发生了变化，不修改是找不到的会报404。

修改成如下：就是在引用的前面加上你的定位名称 /webplatform

然后静态资源记得也要改下，我这里找图片就找不到。不可以直接 / 去找，要带上你的名称。
下面在nginx.conf中配置下：

然后重新加载下nginx就可以了。

不过我也看到他们直接在前端项目中配置 config下的index.js中如下的内容，我没有试过，感兴趣的同学可以自行尝试一下。