如何在本地部署vue+springboot先后端分离应用

今天想在windows本地搭建一个服务器跑整个vue+springboot项目，但始终访问不到后端接口，网上介绍这方面的博客也不多，如今我将个人搭建过程与你们分享一下。

 

咱们知道，在平时的开发过程当中，将springboot服务启动后，而后用npm run dev将前端项目运行起来，这样整个项目就跑起来了，在浏览器中就能够看到效果。这是由于node.js起了一个代理服务器的做用。但在服务器中vue项目是用npm run build打包出来的dist目录，那要怎么部署呢？

 

（1）首先下载安装nginx看成前端静态资源服务器和反向代理服务器；

（2）将npm run build出来的dist目录中的index.html和static目录拷贝至nginx中html目录下，会覆盖原有的index.html；

（3）用mvn clean package将springboot后端项目打包，会在target目录下出现一个终极.jar文件；

（4）进入target目录，用java -jar ****.jar运行后端项目，由于springboot是默认继承了web容器的，因此不用另外安装tomcat了；

（5）这时在浏览器中访问localhost就能够看到index.html页面了，可是访问后端接口会报404；

（6）这就要改下nginx的配置文件了，在nginx.conf文件中的server下新增location /api/ {proxy_pass http://192.168.1.19:9090/;}   这里要注意/的多少问题，很容易出错；

（7）另外转发到后端接口时不要写http://localhost，必定要写http://ip地址，否则会有莫名其妙的错误，并且很难发现。

 

另外修改了nginx的配置文件后先把nginx的进程结束掉，而后进入nginx目录，start nginx，  ./nginx -s reload

 

这样一个vue+springboot服务器就搭建起来了。