打包部署若依SpringBoot后端和Vue前端

这篇具有很好参考价值的文章主要介绍了打包部署若依SpringBoot后端和Vue前端。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(1)、打包若依SpringBoot后端

打开若依,点击右侧的Maven展开Maven管理,选择ruoyi>Lifecycle 先双击clean清除原本启动项目时生成的文件。然后点击package等待项目打包

若依前端打包命令,vue.js,前端,spring boot

打包完成后会在ruoyi-admin>src>target里面看到.jar后缀的文件,就代表打包成功(可以把这个文件复制出来存放到其他地方,方便后面启动)

若依前端打包命令,vue.js,前端,spring boot

(2)、部署若依SpringBoot后端

把刚刚打包好的文件存放到自己的文件位置

若依前端打包命令,vue.js,前端,spring boot

然后在路径栏里输入cmd,回车会打开一个命令框

若依前端打包命令,vue.js,前端,spring boot

若依前端打包命令,vue.js,前端,spring boot

在命令框里输入java -jar ruoyi-admin.jar回车启动打包好的jar包。

若依前端打包命令,vue.js,前端,spring boot

这个窗口不要关闭!!!!关闭就是结束运行了

(3)、打包若依Vue前端

使用Visual Studio Code打开ruoyi-ui文件夹

若依前端打包命令,vue.js,前端,spring boot

打开终端:左上角任务栏选择终端>新建终端

若依前端打包命令,vue.js,前端,spring boot

在新建终端中输入命令npm run build:prod,回车等待打包完成

若依前端打包命令,vue.js,前端,spring boot

打包完成后查看文件目录,有一个叫dist的文件夹就是打包成功了,dist的文件夹介绍打包的Vue项目了

若依前端打包命令,vue.js,前端,spring boot

(4)、部署若依Vue前端

前端部署需要使用nginx 下载地址(https://nginx.org/en/download.html)下载

若依前端打包命令,vue.js,前端,spring boot

下载完成解压到任意地方

若依前端打包命令,vue.js,前端,spring boot

然后进入nginx-1.22.1>html  把刚刚打包好的Vue前端dist文件复制进来

若依前端打包命令,vue.js,前端,spring boot

然后返回上一层 进入conf文件夹

若依前端打包命令,vue.js,前端,spring boot

用Visual Studio Code打开nginx.conf

更改以下代码(改完ctrl+s保存就可以关闭Visual Studio Code)

若依前端打包命令,vue.js,前端,spring boot

        location / {
            root   html/dist;  // 打包好的文件路径
            try_files $uri $uri/ /index.html; # 将所有路由请求重定向到index.html
        }

        location /prod-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;       #后台项目的运行端口
        }

启动ngxin 首先回到nginx-1.22.1文件夹里

在路径栏里输入cmd,回车会打开一个命令框

若依前端打包命令,vue.js,前端,spring boot

若依前端打包命令,vue.js,前端,spring boot

在命令行里输入start nginx 回车会出现闪一下,就代表启动了

然后在浏览器地址栏中输入http://localhost/ 回车 出现若依的登录页面就代表全部部署完成 (如果打开的时候提示系统接口502异常原因结束后端的命令窗口关闭了)

若依前端打包命令,vue.js,前端,spring boot

停止运行的话在命令行输入nginx -s stop回车(前端),后端的直接关闭命令窗口就可以了

若依前端打包命令,vue.js,前端,spring boot文章来源地址https://www.toymoban.com/news/detail-857429.html

到了这里,关于打包部署若依SpringBoot后端和Vue前端的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 若依ruoyi前端vue使用jsencrypt.js加密后端java进行RSA解密(前后端交互RSA加解密)

    目录 1、前后端RSA加解密实现思路 2、前端 3、后端 按照约定来说公钥一般用来加密,大家都可以获取得到,私钥用来解密,当然你也可以混着用,以下示例是前端通过加密,后端解密.  -----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ81AMIIBCgKCAQEA1+05vAf7m5NcLNLkRtsm gp+QdzcW6MVdayGTGBJG0v

    2024年02月06日
    浏览(70)
  • 搭建flask后端和微信小程序前端

    目录 一、准备工作 (1)我的前端代码 (2)我的后端代码 (3)后端运行成功的截图 (4)前端运行成功的截图  (5)整体运行成功的截图 二、部署后端  (1)在腾讯云的学生入口处购买服务器(建议选择ubuntu系统),设置管理秘钥,方便在本地远程连接。 (2)在本地的

    2024年02月04日
    浏览(52)
  • ruoyi-vue(若依前后端分离版本)环境搭建 用idea 安装redis 后端配置 配置node环境 前端配置

    1.在https://gitee.com/y_project/RuoYi-Vue下载源码并解压至本地文件 2.将sql文件下的两个sql文件导入数据库生成表  3.在E:eclipsespaceoneRuoYi-Vue-masterruoyi-adminsrcmainresourcesapplication-druid.yml修改数据库名和密码 4.在E:eclipsespaceoneRuoYi-Vue-masterruoyi-adminsrcmainresourcesapplication.yml配置red

    2024年04月14日
    浏览(48)
  • Java后端和前端传递的请求参数的三种类型

    在 HTTP 请求中,常见的请求参数类型有三种:`application/x-www-form-urlencoded`、`multipart/form-data` 和 `application/json`(通常用于 `raw` 类型)。这三种类型主要指的是请求体中的数据格式,其中包括参数的传递方式和编码。 1. **`application/x-www-form-urlencoded`:**    - 这是默认的编码类型

    2024年02月02日
    浏览(48)
  • docker 部署 若依 Ruoyi springboot+vue分离版 dockerCompose

    本篇从已有虚拟机/服务器 安装好dokcer为基础开始讲解 创建conf data init三个文件夹  conf目录存放在mysql配置文件 init目录存放着若依数据库sql文件(从navicat导出的并非若依框架自带sql) 创建一个属于本次若依部署的网段(只有在一个网段的容器才能通过容器名通信) 启动my

    2024年02月02日
    浏览(42)
  • ❤ 全面解析若依框架vue2版本(springboot-vue前后分离--前端部分)

    一般在vue项目public文件夹下命名为“favicon.ico” ❤ 处理步骤 第1步:将图标重命名为“favicon.ico”,并放在项目根目录 下。 第2步:然后在index.html中引入,title中修改页面标题。 第3步:修改build文件夹下 webpack .dev.conf.js和webpack.prod.conf.js文件中的内容。 第五步:重新已经成功

    2024年02月12日
    浏览(51)
  • 若依springboot+vue前后端分离系统部署到腾讯服务器教程

    前后端分离的开发模式在现代web应用开发中越来越流行,它可以提高开发效率、降低维护成本、提高系统的可扩展性和可维护性。而腾讯云作为国内领先的云计算服务提供商,为开发者提供了稳定、高效、安全的云计算服务,为前后端分离应用的部署提供了良好的解决方案。

    2024年02月04日
    浏览(64)
  • SpringBoot+vue2联合打包部署,混合打包部署

    前端工程和后端工程目前是都是相对独立性的模式进行开发的。 软件工程场景: 前后端工程在同一个父工程下面,作为一个子工程存在,各自独立开发。 前端工程作为一个独立的目录存在于后端代码中,前端目录的根目录(例如front)与后端工程的src目录同级。–本文的例

    2024年02月20日
    浏览(34)
  • 若依框架(前后端分离) 之IDEA中Maven后端打包

    Maven是一个跨平台的项目管理工具。作为Apache组织的一个颇为成功的开源项目,其主要服务于基于Java平台的项目创建,依赖管理和项目信息管理,是一个自动化构建工具。maven是Apache的顶级项目,解释为“专家,内行”,它是一个项目管理的工具,maven自身是纯java开发的(

    2024年02月09日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包