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

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

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

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

打包机 只拥有maven,没有nodejs

软件工程场景:

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

打包发布场景:

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

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

SpringBoot+vue2联合打包部署,混合打包部署,工具使用,spring boot,vue,node.js

  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安装包放进去才可以。文章来源地址https://www.toymoban.com/news/detail-829724.html

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

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

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

相关文章

  • 详解如何使用Jenkins一键打包部署SpringBoot项目

    目录 1、Jenkins简介 2、Jenkins的安装及配置 2.1、Docker环境下的安装​编辑 2.2、Jenkins的配置 3、打包部署SpringBoot应用 3.1、在Jenkins中创建执行任务 3.2、测试结果 任何简单操作的背后,都有一套相当复杂的机制。本文将以SpringBoot应用的在Docker环境下的打包部署为例,详细讲解如

    2024年02月05日
    浏览(61)
  • SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里

    记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源,在开发的时候,一般选择前后端分离的方式,前端使用vue 后端使用SpringBoot,通常情况下,部署都是前端通过http去请求后端资源,涉及到http请求,那么肯定需要资源的目标地址IP,一般云端部署给到I

    2024年02月09日
    浏览(75)
  • Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤,从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf)

    目录 一丶前言 二、安装nginx 1.准备nginx 2.服务器上传nginx 3.解压nginx  4.安装相关依赖库 5.编译nginx 6.启动nginx 7.访问nginx  8.安装成系统服务 三、安装Tomcat 1.安装JDK(如果安装并配置环境变量了可以略过) 2.准备Tomcat 3.服务器上传tomcat 4.解压tomcat  5.启动tomcat 6.访问tomcat 7.设置

    2024年02月05日
    浏览(68)
  • vue2项目打包压缩处理

    平常项目打包后,js等文件会体积大,这样用户访问会慢 webpack优化 – compression-webpack-plugin 开启gzip 1、安装compression-webpack-plugin 这里我项目webpack版本是3.6.0,所以得安装低版本得compression-webpack-plugin,webpack版本高于这个得安装其他版本,不然会报错 2、修改配置 1、在config/i

    2024年01月18日
    浏览(46)
  • Vue2使用element-ui引入自定义主题的方法(使用在线主题生成工具)

    第一步 :按照官方文档使用npm安装element-ui,并完整引入Element-ui npm i element-ui -S  main.js中所有的内容删去,改为 随便写点东西,run一下 成功引入element-ui,但是不喜欢默认的蓝色,看起来很烂大街,想换掉。 第二步 :由于不喜欢默认的蓝色主题,可以使用在线主题生成工具

    2024年02月14日
    浏览(53)
  • vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法

    axios封装-我常用的请求头参数  application/json; charset=utf-8 页面登录请求-post 网络请求正常传入参数 后端代码,查看控制台发现都为null,没取到值。 1.尝试将前端post请求改成get,其他都不用变 发现正常取到值,打印输出正常。前端页面正常跳转。 2.后端设置为post请求,前端a

    2024年02月02日
    浏览(50)
  • vue2项目打包遇到的问题(记录)

    临时纯手工搭建开发了个vue2小项目,打包后出现了很多问题 一、打包后index.html打开空白 打包后整个页面空白,是因为打包后资源路径不对,需要修改config-index.js下, build 属性中assetsPublicPath值为 ./ 二、打包后图片等静态资源无法显示 需要修改build下utils.js文件,新增一句话

    2024年02月16日
    浏览(42)
  • Springboot+Flask+Neo4j+Vue2+Vuex+Uniapp+Mybatis+Echarts+Swagger+JWT+Nginx+VueRouter综合项目学习笔记【包括项目部署】

    项目访问入口 Neo4j高性能图数据库从入门到实战 教程博客:Neo4j 开启命令 医学知识图谱问答系统 neo4j知识图谱 Vue+flask 中药中医方剂大数据可视化系统 ECharts数据可视化项目、 D3js: 数据可视化入门D3.js 展示地址:数据可视化 子绝父相 立即执行函数(function(){})(); ECharts官网:

    2024年02月03日
    浏览(44)
  • 使用springboot框架Java+vue2开发的智慧班牌系统源码,SaaS云平台前后端分离架构

    智慧班牌系统可实现数字化办公,对外向学生家长提供各种服务,如:消息通知、请假管理,校园活动,学生动态,教师通讯录,学生定位等各种服务。对内向教师提供各类服务,如:班级管理,考勤管理,请假管理,活动管理,课堂点名,家长会管理,教师课程等等各种服

    2024年02月12日
    浏览(50)
  • 【Vue3实践】(六)Vue3使用vite处理环境变量、打包部署、nginx配置

    由于在日常开发中会有一部分前端的开发任务,会涉及到Vue的项目的搭建、迭代、构建发布等操作,所以想系统的学习一下Vue相关的知识点,本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录。 历史文章链接如下: 《Vue3搭建、路由配置与基本语法

    2023年04月08日
    浏览(141)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包