SpringBoot+vue2联合打包部署,混合打包部署

news2025/3/15 20:49:29

SpringBoot+vue2联合部署,混合部署

前端工程和后端工程目前是都是相对独立性的模式进行开发的。

打包机 只拥有maven,没有nodejs

软件工程场景:

  • 前后端工程在同一个父工程下面,作为一个子工程存在,各自独立开发。
  • 前端工程作为一个独立的目录存在于后端代码中,前端目录的根目录(例如front)与后端工程的src目录同级。–本文的例子采用的是这种模式。

打包发布场景:

  • 不将前端单独打包发布至nginx服务器中。
  • 服务器只能部署一个war包。–本文的例子采用的是这种模式。

当满足上述场景的时候,可以采用以下打包部署方案

在这里插入图片描述

  1. 优先将前端构建打包,将前端构建出的内容,copy至后端SpringBoot工程的webapp目录下。
  2. 在通过maven打包后端,这样就可以将前端资源打保进war中了。

实现

主要是在前端处理。

在前端工程中增加脚本,脚本调用入口在package.json文件中。通过node调用文件copy的脚本。

{
  ...
  ...
  "scripts": {
    "build-copy": "vue-cli-service build && node src/utils/fileCopy.js"
  },
  ...
  ...
}

fileCopy.js

先删除目标路径(后端工程中的前端文件的路径)下的内容,在将新生成的前端文件copy过去。

const fileUtil = require('./fileUtil')

// 目标文件夹
const staticDirectory = '../src/main/webapp/'
// 删除
fileUtil.deleteFolder(staticDirectory + "static")
fileUtil.deleteFile(staticDirectory + "index.html")
// 拷贝
fileUtil.copyFolder('./server/dist', staticDirectory)
console.log('文件拷贝成功!')

fileUtil.js

借助fs模块进行文件操作。

const fs = require('fs')

/**
 * 删除该路径下所有的内容
 * @param path
 */
function deleteFolder(path) {
  let files = []
  if (fs.existsSync(path)) {
    if (fs.statSync(path).isDirectory()) {
      files = fs.readdirSync(path)
      files.forEach((file) => {
        const curPath = path + '/' + file
        if (fs.statSync(curPath).isDirectory()) {
          deleteFolder(curPath)
        } else {
          fs.unlinkSync(curPath)
        }
      })
      fs.rmdirSync(path)
    } else {
      fs.unlinkSync(path)
    }
  }
}

/**
 * 删除文件
 * @param path
 */
function deleteFile(path) {
  if (fs.existsSync(path)) {
    if (fs.statSync(path).isDirectory()) {
      deleteFolder(path)
    } else {
      fs.unlinkSync(path)
    }
  }
}

/**
 * 复制路径下的内容到指定目录
 * @param from
 * @param to
 */
function copyFolder(from, to) {
  let files = []
  // 文件是否存在 如果不存在则创建
  if (fs.existsSync(to)) {
    files = fs.readdirSync(from)
    files.forEach((file) => {
      const targetPath = from + '/' + file
      const toPath = to + '/' + file

      // 复制文件夹
      if (fs.statSync(targetPath).isDirectory()) {
        copyFolder(targetPath, toPath)
      } else {
        // 拷贝文件
        fs.copyFileSync(targetPath, toPath)
      }
    })
  } else {
    fs.mkdirSync(to)
    copyFolder(from, to)
  }
}

module.exports = {
  deleteFolder,
  deleteFile,
  copyFolder
}

问题:

  1. 在管理代码上需要进行手动执行前端打包,容易忘记。
  2. 对本地开发环境需要同时支持特定版本的nodejs和npm。

打包机同时拥有maven和nodejs。

如果打包机同时拥有maven和nodejs。可以借助maven插件frontend-maven-plugin进行一步打包。

<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>

若需要使用这个插件,需要将软件工程,调整为,后端工程和前端工程平级,同属于一个父工程的子工程下面。在父工程的pom文件中,定义模块时,需要将前端模块顺序放在后端之前,这样做,主要是为了解决前后端的打包顺序问题。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  ...
  ...
  ...
    <modules>
        <module>frontend</module>
        <module>server</module>
    </modules>
</project>

前端工程中需要增加一个pom文件。配置脚本

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  ...
  <build>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.8.0</version>
        <executions>
          <!-- 检查是否安装node npm -->
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <phase>generate-resources</phase>
          </execution>
          <!-- 执行脚本,删除node_modules和package-lock.json -->
          <execution>
            <id>npm run clean</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
              <arguments>run clean</arguments>
            </configuration>
          </execution>
          <!-- npm install -->
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
              <arguments>install --registry=https://registry.npm.taobao.org</arguments>
            </configuration>
          </execution>
          <!-- build 之后复制文件到 src/main/resource/static 下 -->
          <execution>
            <id>npm run build</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
              <arguments>run build-copy</arguments>
            </configuration>
          </execution>
        </executions>
        <configuration>
          <nodeVersion>v10.24.1</nodeVersion>
          <npmVersion>6.14.12</npmVersion>
          <!-- node安装路径 -->
          <installDirectory>${settings.localRepository}</installDirectory>
          <!-- 前端代码路径 -->
          <workingDirectory>${basedir}</workingDirectory>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

通过调用父工程的mvn clean install即可。

问题:

  1. 首次安装 nodejs和npm会很慢。

  2. 打包机需要可以访问淘宝镜像。或者搭建本地镜像,将对应的node和npm安装包放进去才可以。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1453215.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Mysql知识点汇总

Mysql知识点汇总 1. Mysql基本场景的简单语句。2. Mysql的增删改查&#xff0c;统计表中的成绩最好的两个同学的名字&#xff0c;年级等。3&#xff1a;请使用多种方法查询每个学生的每门课分数>80的学生姓名4、order by&#xff0c;group by&#xff0c;子查询4.1、having和…

政安晨:【示例演绎】【Python】【Numpy数据处理】快速入门(一)

简介 NumPy是SciPy家族的成员之一。 SciPy家族是一个专门应用于数学、科学和工程领域的开源Python生态圈&#xff0c;或者说是一个由多个Python库组成的集合&#xff0c;用于解决科学计算中的各种问题。这些库构成了一个功能强大的科学计算工具箱&#xff0c;可以进行数值计算…

Paper - CombFold: predicting structures of large protein assemblies 论文简读

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/136143199 CombFold: predicting structures of large protein assemblies using a combinatorial assembly algorithm and AlphaFold2 CombFold…

【论文精读】DALL·E

摘要 本文利用从互联网上收集的2.5亿个图像/文本对数据&#xff0c;训练了一个120亿参数的自回归transformer&#xff0c;进而得到一个可以通过自然语言/图像控制生成的高保真图像生成模型。在大多数数据集上的表现超越以往的方法。 框架 本文的目标为通过训练一个自回归trans…

mysql调优实战

EXPLAIN执行分析 id:值越大越先执行相同时&#xff0c;由上向下执行。 possible_key: 可能走索引的键。 key&#xff1a;真正走索引的键rows:根据表统计信息及索引选用情况&#xff0c;大致估算出找到所需的记录所需要读取的行数&#xff0c;也就是说&#xff0c;用的越少越好 …

004 - Hugo, 分类

004 - Hugo, 分类content文件夹 004 - Hugo, 分类 content文件夹 ├─.obsidian ├─categories │ ├─Python │ └─Test ├─page │ ├─about │ ├─archives │ ├─links │ └─search └─post├─chinese-test├─emoji-support├─Git教程├─Hugo分类├─…

如何在CSS中实现背景图片的渐变?

--引言 在CSS中&#xff0c;实现背景图片的渐变通常需要使用linear-gradient或者radial-gradient函数&#xff0c;这些函数可以与背景图像一起使用来创建渐变效果。然而&#xff0c;CSS的渐变并不直接支持使用图像作为渐变的颜色停止点。但你可以通过一些技巧来实现类似的效果…

2024年【高处安装、维护、拆除】模拟考试题库及高处安装、维护、拆除实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 高处安装、维护、拆除模拟考试题库是安全生产模拟考试一点通生成的&#xff0c;高处安装、维护、拆除证模拟考试题库是根据高处安装、维护、拆除最新版教材汇编出高处安装、维护、拆除仿真模拟考试。2024年【高处安装…

得物面试:Redis用哈希槽,而不是一致性哈希,为什么?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; Redis为何用哈希槽而不用一致性哈希&#xff1f; 最近…

Prompt Tuning:深度解读一种新的微调范式

阅读该博客&#xff0c;您将系统地掌握如下知识点&#xff1a; 什么是预训练语言模型&#xff1f; 什么是prompt&#xff1f;为什么要引入prompt&#xff1f;相比传统fine-tuning有什么优势&#xff1f; 自20年底开始&#xff0c;prompt的发展历程&#xff0c;哪些经典的代表…

Sora时代,我们的AI应该何去何从?——关于Sora大模型的思考

Sora时代&#xff0c;我们的AI应该何去何从?——关于Sora大模型的思考 一、Sora大模型&#xff1a;横空出世&#xff0c;让AI生成所有领域瑟瑟发抖二、Sora的出现代表了相关行业的灭亡&#xff1f;三、我们将何去何从&#xff1f; 一、Sora大模型&#xff1a;横空出世&#xf…

计算机毕业设计SSM基于的高校学习资源共享系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; vue mybatis Maven mysql5.7或8.0等等组成&#xff0c;B…

C++ 多起点的bfs(五十九)【第六篇】

今天我们来学习多起点的bfs 1.多起点的bfs 在普通的广度优先搜索问题中&#xff0c;为了得到从初始状态到达目标状态的最小操作数&#xff0c;则将初始状态放入队列中。离初始状态由近及远地不断扩展出新的状态&#xff0c;直到搜索到目的状态&#xff0c;或队列为空&#xff…

使用Docker部署JDK镜像

构建镜像 我们将已经准备好的docker-demo.jar包以及Dockerfile拷贝到虚拟机的/root/demo目录&#xff1a; 然后&#xff0c;执行命令&#xff0c;构建镜像&#xff1a; # 直接指定Dockerfile目录 docker build -t docker-demo:1.0 /root/demo 查看镜像列表&#xff1a; # 查看…

神经网络算法原理

目录 得分函数 数学表示 计算方法 损失函数 ​编辑 前向传播 反向传播 ​编辑 整体架构 正则化的作用 数据预处理 ​过拟合解决方法 得分函数 得分函数是在机器学习和自然语言处理中常用的一种函数&#xff0c;用于评估模型对输入数据的预测结果的准确性或匹配程度。…

函数、极限、连续——刷题(5

目录 1.题目&#xff1a;2.解题思路和步骤&#xff1a;3.总结&#xff1a;小结&#xff1a; 1.题目&#xff1a; 2.解题思路和步骤&#xff1a; 首先可能想到的是答案为0&#xff0c;但是不可以把 直接化简为n 这里要用到分子分母的平方差&#xff0c;sin^2的周期为π&#x…

WebServer 之 http连接处理(下)

目录 ✊请求报文--解析 流程图 && 状态机 状态机 -- 状态转移图 主状态机 从状态机 http 报文解析 HTTP_CODE 含义 从状态机 逻辑 主状态机 逻辑 &#x1f41e;请求报文--响应 基础API stat mmap iovec writev 流程图 HTTP_CODE 含义(2) 代码分析 …

及其详细的Markdown基础-学习笔记(附有使用案例)

Markdown 基础语法 查看更多学习笔记&#xff1a;GitHub&#xff1a;LoveEmiliaForever 标题创建 标题语法格式 在文字前添加一至六个#即可创建标题 标题是有等级的&#xff0c;具体等级根据#个数决定 由于标题等级参与构建整篇文章的架构&#xff0c;编写时应该遵循如下规…

【C->Cpp】由C迈向Cpp(3)

正文开始&#xff1a; 目录 &#xff08;一&#xff09;函数重载 &#xff08;1&#xff09;函数重载 &#xff08;2&#xff09;函数重载实现原理 &#xff08;二&#xff09; 引用 &#xff08;1&#xff09;引用 &#xff08;2&#xff09;语法 i &#xff0c;别名&am…

输入捕获模式测频率PWM输入模式(PWMI)测占空比

一、概念介绍 输出比较&#xff1a; 比较电路输入的CNT、CCR大小关系 &#xff0c;在通道引脚输出高低电平 二、*频率知识、测量方法补充 * N/fc得到标准频率的时长&#xff0c;也就是待测频率的周期 测频法代码实现&#xff1a;修改对射式红外传感器计次&#xff08;上升沿…