这篇文章主要介绍“分享两个开源的Spring Boot + Vue前后端分离项目”，在日常操作中，相信很多人在分享两个开源的Spring Boot + Vue前后端分离项目问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”分享两个开源的Spring Boot + Vue前后端分离项目”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
为安吉等地区用户提供了全套网页设计制作服务，及安吉网站建设行业解决方案。主营业务为成都网站制作、网站设计、安吉网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
vblog.itboyhub.com
vhr.itboyhub.com
这两个二级域名分别用来部署 V 部落和 微人事。
大家可以通过这两个地址查看效果：
微人事
V 部落
为了确保每位小伙伴都能看到完整的演示效果，防止有的小伙伴不慎把所有数据清空了，导致其他小伙伴啥都看不到，我只开通了演示账户的查询和部分字段的更新权限，因此大家在查看演示效果时，可能会有一些涉及到增删改的操作会执行失败，请勿见怪，将项目部署到本地运行之后，就可以查看完整效果了。
既然都写到这儿了，就和大家聊一聊这两个部署是怎么实现的。
大家知道前后端分离部署的时候，我们有两种不同的方案：
一种就是将前端项目打包编译之后，放到后端项目中（例如 Spring Boot 项目的 src/main/resources/static 目录下）
另外一种则是将前端打包之后的静态资源用 Nginx 来部署，后端单独部署只需要单纯的提供接口即可。
一般在公司项目中，我们更多的是采用后者。不过松哥这里部署为了省事，我采用了第一种方案。（以后抽空我会和大家聊聊第二种部署方案）
域名映射这块简单，登录阿里云后台，添加两个 A 记录即可。
将 微人事和 V 部落分别打包上传到服务器，这个过程应该就不用我多说了吧，然后分别启动这两个项目，两个项目的默认端口分别是 8081 和 8082，命令如下：
nohup java -jar vblog.jar > vblog.log &nohup java -jar vhr.jar > vhr.log &
将两个项目的运行日志分别写入到 vblog.log 和 vhr.log 文件中。
启动成功之后，我们就可以通过 itboyhub.com:8081 和 itboyhub.com:8082 两个端口来分别访问这两个项目了。但是这还没达到松哥的目标，我想通过二级域名来访问，并且想通过 80 端口来访问，这就要借助 Nginx 了。
注意
启动完成后，大家需要登录阿里云后台，确认 8081 和 8082 端口已经开启。
这里我们主要来看看 Nginx 的配置。
由于有两个二级域名，而且未来服务器还要配置其他域名，因此域名要能够做到动态解析，因此在具体配置如下：
重庆分公司
重庆分公司
server { listen 80; server_name *.itboyhub.com; if ($http_host ~* "^(.*?)\.itboyhub\.com$") { set $domain $1;
} # 其他配置...}首先监听的端口为 80
二级域名则用一个通配符 * 代替
接下来在 if 语句用，通过正则表达式提取出二级域名的名字，交给变量 $domain，以备后用。
接下来配置转发规则：
location / { if ($domain ~* "vhr") { proxy_pass http://itboyhub.com:8082;
} if ($domain ~* "vblog") { proxy_pass http://itboyhub.com:8081;
}
tcp_nodelay on; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; index index.html;
}当定义的 $domain 中包含 vhr 字符时，将请求转发到 http://itboyhub.com:8082
当定义的 $domain 中包含 vblog 字符时，将请求转发到 http://itboyhub.com:8081
最后再配置将代理服务器收到的用户的信息传到 real server 上
另一方面，由于默认的后端首页是 /index.html，如果用户直接访问
vblog.itboyhub.com 或者
vhr.itboyhub.com，会被权限管理机制拦截（会自动重定向到 /login_p），因此，如果用户访问地址中没有 /index.html ，则自动添加上 /index.html，配置如下：
location /login_p { if ($domain ~* "vhr") { rewrite ^/(.*)$ http://vhr.itboyhub.com/index.html permanent;
} if ($domain ~* "vblog") { rewrite ^/(.*)$ http://vblog.itboyhub.com/index.html permanent;
}
}注意，这行配置在 location / 之前进行配置，这里两个 if 的含义和前面的一样，不再赘述。
到此，关于“分享两个开源的Spring Boot + Vue前后端分离项目”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
