前后端分离开发：把一个项目拆成两部分进行开发，所以在打包的时候，需要使用不同的打包方式。

---

• 后端 – SpringBoot – jar包

• 前端 – Vue:

1. 因为使用了vue-admin-template框架：所以先使用框架进行打包
2. 使用Nginx部署，通过nginx进行运行

---

一、后端

1. 在pom文件中添加build配置
   

2. 使用maven进行打包
   

3. 点击“”package“打包
   
   4.在target中 打成jar包
   
   5.启动

````java -jar 项目名字```

二、前端

1. 项目部署

1. 要使用生产环境。所以要把vue.config.js里的proxy里的/dev-api改成/prod-api
   

2. 打包命令： npm run build:prod
   
   3.打包成功后，生成dist文件

4.部署到nginx上运行

• 安装nginx（https://blog.csdn.net/weixin_46511008/article/details/118766466）

• 复制项目里dist的内容
  

• 安装到nginx的html文件里
  

-----此时已完成前端的

---

2. 项目启动

找到nginx里conf下的nginx.conf文件（配置文件）

修改默认访问端口

运行nginx.exe

出现前端页面

---

此时 前端&后端&redis的cmd页面都开着

---

三 、 完善

登录报错404

因为路径已经改成prod-api了但是没有跳转过去
需要在nginx里再做一些配置：

终止nginxnginx.exe -s stop

重启nginx

如果还是报错的话：
打包项目代码，然后把nginx.conf文件里面的地址换成dist文件的地址

然后刷新，成功登录