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

如何在本地部署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服务器就搭建起来了。