springboot+vue.js 做前后端分离开发，将Vue部署到nginx服务器上（本地电脑上的示范）

       刚来公司实习，接到一个前后端分离的项目，我是做后端的，但是本着“万事懂一点儿”的精神，我还是找资料看了一下这到底是怎么个开发方式。

springboot和vue结合的方案网络上的主要有以下两种：

1. 【不推荐】在html中直接使用script标签引入vue和一些常用的组件，这种方式和以前传统的开发是一样的，只是可以很爽的使用vue的双向数据绑定，这种方式只适合于普通的全栈开发。

2.【推荐】使用vue官方的脚手架创建单独的前端工程项目，做到和后端完全独立开发和部署，后端单独部署一个纯restful的服务，而前端直接采用nginx来部署，这种称为完全的前后端分离架构开发模式，但是在分离中有很多api权限的问题需要解决，包括部署后的vue router路由需要在nginx中配置rewrite规则。

 

因为当前的水平有限，我就先介绍一个位于两者中间的开发模式，单页面的开发模式。顾名思义，后台服务器只有一个页面：也就是Vue项目的入口。

首先聊聊后端，后端其实没有什么新的内容，创建一个springboot项目，创建一个负责页面跳转的controller，其他就没了，根据个人的项目来设计，这里仅仅是一个简单的demo。下图是我的项目架构，注意的是在application.yml 中配置端口（在这里我配置的是8088）

然后我们在聊聊前端，首先是创建一个Vue的项目，利用脚手架创建一个完整的项目，大致步骤如下：

• 安装node.js
• 安装淘宝镜像（不然会慢的一X）
• 全局安装webpack cnpm install webpack -g
• 全局安装vue-cli (cnpm install -g vue-cli)
• (用webpack模板来创建一个vue项目)vue init webpack my-project
• 安装项目依赖 cd my-project / cnpm install
• 启动项目
• 编译vue为静态文件(npm run build)

启动项目后，页面如下

注意打包后：npm run build 会在项目中出现dist 文件夹，文件夹中有编译后的样式文件和index.html(代码如下)

下面就是将Vue项目部署到nginx上，这里Vue项目可以停止了，Ctrl+C

部署的步骤很简单，下载ngnix到电脑上，修改nginx 的配置文件nginx.config里的server项，我的配置如下

listen 8080;是项目监听的端口，如果你改为8088；那么浏览器输入localhost：8088就会跳转到Vue项目的首页

location是项目的定位， root定位到项目所在文件夹，index定位到首页HTML。

当然这个location还有很多写法，能写出很强大的功能不过也很麻烦我还没有来的及去看。

到这里部署就结束了，在不启动本地项目的情况下，通过nginx的端口和地址即可以访问。

最后的步骤就是整合：这一步就是重点了

将刚才打包之后产生的dist 文件中static 文件下东西放在resource的static文件下，index.html放在template下

注意这个springboot项目和nginx的listen 一致，此时可以nginx s stop 停止服务，启动springboot项目既可以访问。（效果图如下）

到此，一个demo就做完了。