spring boot + vue + element-ui全栈开发入门——项目部署
2023-09-11 14:21:34 时间
前言
常用的部署方式有两种:
1.是把生成好的静态页面放到spring boot的static目录下,与打包后的spring boot项目一起发布,当spring boot运行起来后,自然而然就能访问到静态页面文件了。
这种方法比较简单,适用于非常小型的系统。优点是:不需要复杂的配置。而缺点也很明显:需要两者一同发布。我在这里就不做赘述了。
2.是通过http服务器发布,本文以nginx为例,重点介绍这种方式。
一、生成静态页面
运行npm run build
生成的页面文件在dist目录下:
二、配置nginx
windows系统下载nginx:http://nginx.org/en/download.html
下载完解压后,找到conf/nginx.conf文件,并修改:
worker_processes 1; events { worker_connections 1024; } http { include mime.types; server { listen 80; server_name localhost; # 静态文件夹路径 root 你的路径; index index.html index.htm; # 后端配置 location /api/ { proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 后端url proxy_pass http://localhost:18080/; } } }
其中,root项目是配置静态网页文件所在的路径,配置成你自己的目录。
location是配置spring boot项目跨域,这里我配置了当匹配到有“/api/”开头的请求,就会转到spring boot的项目中处理。
运行效果如下图所示:
访问nginx的地址,就能访问到之前生成的静态页面和spring boot的后端。
而这就是前后端分离开发的魅力所在。
git代码地址:https://github.com/carter659/spring-boot-vue-element.git
如果你觉得我的博客对你有帮助,可以给我点儿打赏,左侧微信,右侧支付宝。
有可能就是你的一点打赏会让我的博客写的更好:)
相关文章
- Spring并发访问的线程安全性问题
- 【Vue】单文件的组件(.vue)代码实例
- Spring Boot + Vue 如此强大?
- Vue——vue中的双向数据绑定
- CSDN日报191028:冷眼看中国IT20年发展史;Vue + Spring Boot 项目实战
- 手把手教你搭建Spring Boot+Vue前后端分离
- Spring boot 和Vue前后端分离的入门培训
- 使用Docker部署Spring-Boot+Vue博客系统
- spring计划任务,springMvc计划任务,Spring@Scheduled,spring定时任务
- vue学习笔记三:Jquery VS Vue之差异比较概览
- spring框架漏洞整理(Spring Boot Actuator命令执行漏洞)
- spring框架漏洞整理(Spring Boot Actuator相关漏洞)
- Vue脚手架(vue-cli)搭建和目录结构详解
- Spring常考知识点
- [转]Spring Boot——2分钟构建spring web mvc REST风格HelloWorld
- 全栈开发实战|人事管理系统的设计与实现(Spring Boot + Vue 3 + MyBatis)
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- spring boot + vue + element-ui全栈开发入门——spring boot后端开发
- spring boot + vue + element-ui全栈开发入门——前后端整合开发
- [转]Spring源码解析之@Configuration
- 曹工说Spring Boot源码(26)-- 学习字节码也太难了,实在不能忍受了,写了个小小的字节码执行引擎
- spring框架