前后端分离项目的部署方法——vue cli4+springboot

原创已于 2023-06-17 18:37:30 修改 · 6.8k 阅读

49 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #nginx反向代理 #后端 #spring boot

于 2021-11-13 00:17:40 首次发布

本文介绍了两种前后端分离的项目部署方法。方法一是将前端项目打包放入后端项目的静态文件夹，然后部署后端项目；方法二是分别部署前端到web服务器和后端到应用服务器，通过配置nginx实现路由。详细步骤包括前端打包、后端jar包创建以及nginx配置。这两种方法各有优缺点，适用于不同的项目需求和开发者经验水平。

前置条件

首先需要我们写好两个项目（分别是前端和后端的），要写好前后端接口
接口按照我这样写，我这里使用的是axios，使用方法可以参考我的另一篇博客：vue cli4使用axios（通过RAP2生成后端接口）
在这里插入图片描述
这个项目先运行后端再运行前端就可以跑起来了，但是占用了两个端口（前端8080后端8888）
想要变成一个端口就需要接下来的方法

方法一：把前端项目打包，作为后端项目的静态文件，再把后端项目部署在应用服务器中

不推荐，理由很简单：前后端没有完全分离。
但不是完全否定。这种方法用的人也不少，单独运行jar包就能运行整个项目，而且方法比较简单，适合新手

在前端项目根路径使用打包命令npm run build
在这里插入图片描述
可以看到项目中多出了dist文件夹

将文件夹中的东西复制到后端项目的static文件夹下

我的项目根路径：http://localhost:8888/vue
如果直接启动项目进入http://localhost:8888/vue/index.html,会报错

打开index.html,会发现只有一行，将代码格式化（快捷键：CTRL+SHIFT+F）
在这里插入图片描述
可以发现href、rel和src后引用的路径都不对，需要我们修改。
修改后：（就是删除最前面的斜杠 /）

启动项目,主页面进入成功，数据也成功显示。
如果修改了前端项目需要重新打包再复制到后端项目中。
在这里插入图片描述
想要打成jar包可以参考这篇博客：IDEA中的springboot项目打包成jar包运行

方法二：把前端项目部署在 web 服务器中，把后端项目部署在应用服务器中

下载nginx
官网： http://nginx.org/en/download.html
选择windows版本下载
在这里插入图片描述
前端项目仍然npm run build
进入nginx安装目录下的html文件夹，我的是D:\environment\nginx-1.21.4\html
把里面的东西全部删除，再把前端项目dist文件夹下的东西复制到html文件夹下

打开根目录下conf\nginx.conf

找到 server 的配置处，把 listen 80 改为 listen 8081
在这里插入图片描述
如果vue 使用了 history 模式路由
需要将原来默认的 location 注释掉，添加一条 location 配置
这两个分别的原来的和现在的

#location / {
#    root   html;
#    index  index.html index.htm;
#}

location / {
     try_files $uri $uri/ /index.html;
}

配置完成后，运行 nginx 根目录下的 nginx.exe 即可
访问 http://localhost:8081/ 就可以进入主页了
然后打包后端项目，还是参照这篇博客，但是不需要把前端项目放进来了
IDEA中的springboot项目打包成jar包运行
然后在cmd中运行后端项目
再去访问前端的项目，就可以看到后端数据了。