如何在本地部署vue+springboot前后端分离应用
来源:互联网 发布:手机首选网络怎么设置 编辑:程序博客网 时间:2024/06/05 04:40
如何在本地部署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服务器就搭建起来了。
- 如何在本地部署vue+springboot前后端分离应用
- Springboot+Vue 的前后端分离与合并方案
- spring vue 前后端分离
- Django + Vue 前后端分离
- 前后端分离之Springboot后端
- 基于springboot+vue+element+ueditor实现前后端分离的富文本框实现
- vue前后端分离之前端搭建
- nginx+vue.js实现前后端分离
- 如何进行前后端分离
- 前后端分离开发部署模式
- 前后端分离开发部署模式
- Nginx + Uwsgi + Django前后端分离部署
- 前后端分离之本地数据调试——mockJs的应用
- Javaweb项目如何做到前后端分离
- Vue+SpringMVC---前后端分离极简尝试
- 使用Springboot和Vue开发的CRM系统,真正前后端分离的微服务架构,BAT互联网公司主流技术的集大成者
- 前后端分离WebStorm自动部署到tomcat服务器
- 【胖张】Nginx 实现前后端分离部署(简单)
- 微信小程序之初体验
- Python基础-序列化
- Hibernate 原生native sql支持 返回列名
- poj3268
- Failed to connect to /127.0.0.1:8080(使用retrofit2请求网络的时候出现的问题)
- 如何在本地部署vue+springboot前后端分离应用
- tar命令备份ubuntu系统
- MySQL百万级数据库优化
- spring 5.0 aspecj 08
- 修复节点(一)
- 机器学习笔记(IX)线性模型(V)多分类学习
- 【第六篇blog】第三次模拟赛的反思与解析
- 题解
- 测试用例设计实现