springboot+vue+nginx简单实现前后端分离

目前软件架构都比较流行前后端分离，前后端的分离也实现了前后端架构的分离，带来的好处 —— 整个项目的开发权重往前移，实现真正的前后端解耦，动态资源和静态资源分离，提高了性能和扩展性。

SpringBoot与vue 进行前后端分离，主要有这么两种方式：

⑴ 利用vue项目 打包（npm run build命令）出来的dist文件夹拷贝到springboot项目的static 文件目录。

⑵ 利用 nginx 的反向代理，不用将dist目录拷贝到static文件目录下。

第一种方式网上教程比较多，我着重讲一下第二种。。。

1. 开始进行创建Vue项目，假定你已经安装好了npm，安装vue脚手架 vue-cli.

2.我安装的vue-cli版本是3.0以上版本，使用 vue-cli自带的图形化界面命令 vue ui创建项目，简单直接。

3.创建好vue项目之后，执行web界面任务-运行按钮，执行打包,生成dist目录。

4.建立简单的 springboot项目，设置端口号为9090，如下：

5.将打包好的dist目录路径 部署到nginx中，怎么安装部署nginx这里就不说了（自行百度）。打开nginx目录，nginx\conf\nginx.conf 文件 ，配置如下：

项目运行效果：

这样，一个简单的前后端分离demo就整合完成了。