当前位置： 首页 > article >正文

【尚硅谷 - SSM+SpringBoot+SpringSecurity框架整合项目 】项目打包并且本地部署

article 2024/12/24 7:56:53

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

  • 后端 – SpringBoot – jar包

  • 前端 – Vue:

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

一、后端

  1. 在pom文件中添加build配置
    在这里插入图片描述

  2. 使用maven进行打包
    21763e44563918ced6f04ee7ddd.png)

  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文件的地址
在这里插入图片描述
然后刷新，成功登录
在这里插入图片描述


http://www.kler.cn/a/449033.html

相关文章：

  • 项目亮点案例
  • Opencv之对图片的处理和运算
  • CSPM认证最推荐学习哪个级别？
  • （2024.12）Ubuntu20.04安装openMVS＜成功＞.colmap＜成功＞和openMVG＜失败＞记录
  • R 语言 | 绘图的文字格式(绘制上标、下标、斜体、文字标注等)
  • 人脸生成3d模型 Era3D
  • devops和ICCID简介
  • ‌QPainter在Qt中三种类型的渐变
  • AOP中动态代理详解
  • 因子分解(递归)
  • Farfalle - 开源的AI搜索引擎
  • 基于微信小程序的在线选课系统springboot+论文源码调试讲解
  • 5G学习笔记之Non-Public Network
  • SQL Server 批量插入数据的方式汇总及优缺点分析
  • 从零开始C++棋牌游戏开发之第四篇：牌桌界面与交互实现
  • GKE中使用Google Cloud Monitoring监控和Stackdriver Logging查看日志
  • postgreSql对分钟级的降雨数据进行插值为整小时
  • 4 软件工程——总体设计
  • 【Android】Android生成二维码并动态刷新
  • 架构师之路--达梦数据库学习计划
  • Linux用户与权限管理详解
  • Java模拟Mqtt客户端连接Mqtt Broker
  • 增强LabVIEW与PLC通信稳定性
  • 培训机构Day15
  • 小型 Vue 项目，该不该用 Pinia 、Vuex呢？
  • 云原生大数据计算服务 MaxCompute 是什么？