news 2026/7/1 10:13:18

【流程】——若依项目前后端打包发布到服务器

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【流程】——若依项目前后端打包发布到服务器

打包发布

后端项目的打包发布

  1. 修改端口

    在admin模块的application.yml中修改后端端口

    还是这个文件,把redis配置页改一下

    1. 修改数据库连接

      在application-druid.yml中修改数据库连接

  • 打包后端文件

    双击生命周期的package

    生成目录的jar路径,会在打包时会在控制台打印出来

    在这个目录下运行java -jar jia-admin.jar,下面有RY的图标就代表打包的jar包能做出运行

  • 发布后端项目

    1. 上传项目

      将项目上传到宝塔文件的/www/wwwroot/xxx文件下面

    2. 创建项目

      创建为java项目并添加jdk信息(你可以下载宝塔里面的jdk,而可以上传自己的jdk)

    3. 解决日志路径不匹配问题

      然后项目报错如图,分析了一下大概是说我服务器没有若依配置中的日志存储路径

      就是我们在admin模块的logback.xml的日志存放路径设置,你可以在服务器创建/home/ruoyi/logs这个路径,或者改为服务器已经存在的路径

      <!--日志存放路径--><property name="log.path" value="/home/ruoyi/logs" />

      重新启动项目,并能启动成功,并能访问服务器的swagger文档http://your-sever:8002/swagger-ui/index.html,就代表后端项目发布成功(在开发阶段可以开发测试文档的访问,正式部署记得关闭)

前端项目的打包发布

  • 修改测试环境的后端服务路径

    在前端根目录下的vite.config.js文件,将your-server改为你的后端服务器地址(如果端口部署8002),的话,也可以改,但是前面也说了,这是这个配置只有在测试环境生效

    server:{port:80,host:true,open:true,proxy:{// https://cn.vitejs.dev/config/#server-proxy'/dev-api':{target:'http://your-server:8002',// target: 'https://api.wzs.pub/mock/13',changeOrigin:true,rewrite:(p)=>p.replace(/^\/dev-api/,'')}}},
  • 不同的环境

    在前端项目根目录下,有如下环境配置文件

    其中.env.development内容如图,开发环境的地址为/dev-api,被我们上面的vite.config.js代理转发了

    # 页面标题 VITE_APP_TITLE = 气Π的demo # 开发环境配置 VITE_APP_ENV = 'development' # 若依管理系统/开发环境 VITE_APP_BASE_API = '/dev-api'
    • 生产环境和预发布 / 测试的区别

      对比维度.env.production(生产环境).env.staging(预发布 / 测试环境)
      环境标识VITE_APP_ENV = ‘production’VITE_APP_ENV = ‘staging’
      API 基础路径VITE_APP_BASE_API = ‘/prod-api’VITE_APP_BASE_API = ‘/stage-api’
      构建命令npm run build(默认加载该配置)npm run build:stage(通过 --mode staging 加载)
      核心作用场景正式部署上线,面向最终用户使用预发布测试、功能验证、环境适配测试
      配置应用范围生产环境 API 连接、正式部署 URL 路径配置预发布环境 API 连接、测试环境 URL 路径配置
  • 修改测试环境的后端服务路径

    我们这里就直接用生产环境打包了,配置.env.production,将下面的/prod-api改为http/https +your-server

    # 若依管理系统/生产环境 VITE_APP_BASE_API = '/prod-api'

    然后运行打包命令npm run build,将项目的打包文件(项目根目录下的dist文件夹),放到宝塔文件夹中,

    然后创建php站点如下,域名可以选择IP地址格式或者已经解析的域名,根目录选择上面的dist文件夹,下面的配置不用改

  • 解决内容混合问题

    一般的同学用IP地址格式解析配置的话不会遇到这个问题,但如果你绑定了SSL证书和域名,而且http和https混用就会导致内容混合问题,浏览器控制台报错如下

    这玩意就有点复杂了,但是我相信看到这里的各位基本上都有点东西了,我又就不藏着掖着了

    1. 首先,你得需要域名是吧,取阿里或腾讯注册一个,然后进行子域名划分(域名云解析),如图(记录值就是你的服务器的主机地址)

    2. 然后对前后端进行域名配置(要和你上面域名划分的要一样)

    3. 绑定了域名,就可以申请免费的Lets Encrypt证书,然后勾选域名就可以申请了,很简单

      申请好证书后可以开启强制https访问

      然后者时候就有人会问了,Lets Encrypt证书有效期只有三个月,到期了怎么办,有的孩子,有的,宝塔有任务计划,可以自动执行证书续签脚本,只有执行周期小于三个月就可以实现永久续杯。

    4. 外网映射

      这个在后端项目(我们这里是java)中才有,开启的前提是后端项目配置域名。它的功能有的像反向代理,可以转发重写,没有特殊要求的话就直接写/(域名请求全部映射到8002端口)

      然后改一下前端打包环境的请求路径为域名,后端配置一下跨域设置,就跨域成功运行项目啦。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/30 19:15:09

记录一次微前端改造:把 10+ 个独立 Vue 项目整合到一起

记录一次微前端改造&#xff1a;把 10 个独立 Vue 项目整合到一起 最近主导了公司前端项目的微前端化改造&#xff0c;踩了不少坑&#xff0c;也有一些收获。趁着记忆还新鲜&#xff0c;把过程记录下来&#xff0c;希望能给有类似需求的同学一些参考。 声明&#xff1a;我也是第…

作者头像 李华
网站建设 2026/6/30 21:37:20

科技赋能味觉创意 “心语酪印” 西安首秀 打造可定制酸奶消费新场景

当古城西安的千年文脉遇上智能科技的创意火花&#xff0c;一场颠覆传统乳品消费的革新悄然启幕。2025 年 12 月 13 日&#xff0c;西安未央国际核心商圈人流涌动&#xff0c;国内首创智能奶皮子酸奶贩卖机品牌 “心语酪印” 以 “让美好发声” 为主题惊艳亮相。这台打破了 “贩…

作者头像 李华
网站建设 2026/6/30 16:08:36

Windows系统中msg命令的完整使用方法及相关示例

Windows系统中msg命令的完整使用方法及相关示例 在 Windows 系统中&#xff0c;msg 是内置的命令行工具&#xff0c;用于向本地/远程 Windows 终端会话发送消息。以下是 msg ** 命令的完整使用方法**&#xff0c;包括语法、参数、示例和注意事项&#xff0c;覆盖本地/远程、单…

作者头像 李华
网站建设 2026/6/30 22:02:16

java计算机毕业设计社区医院管理系统 街区基层医疗信息管理平台 社区卫生服务站综合运营系统

计算机毕业设计社区医院管理系统18aem9&#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。当“小病进社区、大病进医院”成为分级诊疗的核心口号&#xff0c;社区医院却仍被纸质挂号…

作者头像 李华
网站建设 2026/6/30 21:15:56

OpenCode终极指南:5步掌握终端AI编程助手的核心功能

OpenCode终极指南&#xff1a;5步掌握终端AI编程助手的核心功能 【免费下载链接】opencode 一个专为终端打造的开源AI编程助手&#xff0c;模型灵活可选&#xff0c;可远程驱动。 项目地址: https://gitcode.com/GitHub_Trending/openc/opencode 想要在终端中体验AI编程…

作者头像 李华
网站建设 2026/6/30 10:01:27

洛雪音乐音源:3分钟快速部署全网音乐资源的终极方案

洛雪音乐音源&#xff1a;3分钟快速部署全网音乐资源的终极方案 【免费下载链接】lxmusic- lxmusic(洛雪音乐)全网最新最全音源 项目地址: https://gitcode.com/gh_mirrors/lx/lxmusic- 还在为寻找免费优质的音乐资源而烦恼吗&#xff1f;洛雪音乐音源项目为你提供了完美…

作者头像 李华