spring boot + vue + element-ui全栈开发入门——项目部署

 前言


 

常用的部署方式有两种:

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文件,并修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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

 

如果你觉得我的博客对你有帮助,可以给我点儿打赏,左侧微信,右侧支付宝。

有可能就是你的一点打赏会让我的博客写的更好:)

posted @   冬子哥  阅读(10251)  评论(1编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
点击右上角即可分享
微信分享提示