vue3+springboot前后端分离项目打包教程,附带一些问题的解决

本文详细介绍了前端应用的发布流程,包括使用Nginx作为Web服务器的配置,以及如何通过Docker进行后端应用的容器化部署,涉及到了基础配置、资源优化和容器制作等内容。
摘要由CSDN通过智能技术生成

前端应用发布

在发布前后端分离的企业级应用时,通常前端应用会被发布到独立的Web 服务器中,如nginx、Apache等。下面我们就以当前被广泛应用的nginx为例,讲解一下如何进行前端应用发布。

nginx的安装

nginx是一个高性能、支持高并发的开源Web服务器,因其占用资源少、性能高、支持高并发,并且能够提供负载均衡和缓存服务,在企业级应用中被广泛应用。

1.nginx的下载

nginx采用类BSD协议的许可证进行发布,可以直接从官网上下载,nginx官网如图所示。

其中,“Mainline version”指最新版本,“Stable version”指稳定版本,“Legacy versions”指老旧版本。我们选择稳定版本的nginx/Windows-1.24.0版本进行下载。

2.nginx的安装

下载完成后,首先选择合适位置进行解压,即可完成安装。

解压完成之后,在nginx根目录新建  nginx-startup.bat  和 nginx-shutdown.bat ,分别作为nginx的启动和停止命令。

nginx的启动代码

@echo off
title nginx Running
start /b nginx.exe -c conf/nginx.conf

nginx的停止代码

@echo off
title nginx Stop
nginx -s stop

nginx的默认配置文件为根目录下 conf 文件夹中的 nginx.conf 文件,后面要用哦。

使用nginx-startup.bat启动时,启动命令没有常驻命令行窗口,如图6-29所示,可在任务管理器中查看nginx的状态。

启动后能在任务管理器中找到nginx的相关进程:一个master进程和一个worker进程。

 3.nginx的基本配置与优化

在实际使用中,可以通过对 nginx参数的配置和优化,实现定制化的应用需求,并大幅度地提子运行性能。

  • 监听自定义端口: nginx默认监听80端口,如图所示,可以修改server块中 listen 的端口号来监听自定义端口。
  • 文件服务器:nginx可以根据请求URI将选定格式的请求转发到指定的路径中。如图中6-31所示,请求gif、jpg、jpeg、png等格式的文件时,将会直接从C:/apache-tomcat-7.0.105/webapps目录中进行查找,这样可以实现资源文件的动静分离,提升服务器的性能。
  • gzip的压解:nginx可以先压缩返回结果,再返回给客户端,能够有效地减少请求所需的流量。

前端应用打包及发布

进入到前端项目根目录中,运行 npm run build 或 cnpm run build,即可进行打包。


如果出现如下提示

<script src="xxx.js"> in "/index.html" can't be bundled without type="module" attribute

大致意思是我们 引入js文件时缺少了type='module'属性

解决方法:

修改HTML文件:在出现错误的HTML文件中,找到引用脚本的部分,检查其type属性。如果type属性为“script”,则将其改为“module”。

例如,将代码中的

 <script type="text/javascript" src="/src/api/GeoUtils.js" ></script>

修改为

 <script type="module" src="/src/api/GeoUtils.js" ></script>

这样可以告诉浏览器该脚本是一个模块,可以被ES6模块系统识别和加载。

但是这样之后,如果页面加载还出现未定义的情况,记得把js里的你用到的函数或者变量export暴露出来,然后在文件中导入对应的内容。因为它已经作为了模块,所以使用的时候需要导入。


打包结束后,会在根目录中生成dist目录,把dist目录中的所有内容,复制到nginx的html目录中。

注意:是把dist目录中的所有文件复制过去,而不是直接把整个dist文件夹复制过去

在nginx的配置文作中,需要配置server中的端口号即可,我这里是5173。

现在前端应用就打包好了,点击 nginx-startup.bat 启动服务器,访问 http://localhost:你的端口号 就可以啦!


如果遇到代理失效问题,在nginx的配置文作中的server里添加如下代码:

location /api{
    rewrite ^.+api/?(.*)$ /$1 break;
    proxy_pass   http://127.0.0.1:8080;//替换为你要代理的端口号
}

后端应用发布

SpringBoot导出Jar包

这里演示通过IDEA将SpringBoot项目导出为jar包

  1. 打开项目,找到侧边栏的Maven

  2. 点击Meavn后,双击 clean ,如果成功,则返回值为0。双击 clean 的目的是清除之前生成的输出文件以及编译内容,确保导出的Jar包是当前项目且是最新的版本。

  3. 双击 package 等待打包完成,如果成功,则返回值为0。

  4. 打开项目,将所有文件夹进行折叠。找到 target 目录,可以看到最后有一个 .jar 类型的文件,这就是导出的Jar包。


如果打包时以下报错

class lombok.javac.apt.LombokProcessor (in unnamed module @0x3b8a0e68) cannot access class com.sun.tools.javac.processing.JavacProcessingEnvironment (in module jdk.compiler) because module jdk.compiler does not export com.sun.tools.javac.processing to unnamed module @0x3b8a0e68

这种情况是因为你的jdk版本太高与lombok不匹配导致的。

解决方法:

lombok依赖中的版本改成1.18.20即可


容器化部署后端应用

容器技术支持将应用打包进一个可以移植的容器中,重新定义了应用开发、测试和部署的过程,其典型应用场景是为开发运维提供持续集成和持续部署的服务。容器技术与微服务有着天然的联系,微服务只有借助容器技术才能发挥最大的潜力。下面将以Docker为例,介绍如何使用容器技术进行企业级应用的发布。

1.Docker 简介

Docker是一个基于Go语言开发的开源的应用容器引擎,遵循Apache 2.0协议。Docker能够凭借比虚拟机平台更高的资源使用率,轻松支撑自动化测试、持续集成、快速部署和快速扩展等功能。

Docker包括如下3个基本概念。

  • 镜像(image):镜像是包含了应用所有信息的文件系统,除了提供容器运行时所霜的程序、用资源、配置等文件,还提供一些为运行准备的配置参数(如匿名卷、环境变量、用户等)。镜像不包含任何动态数据,其内容在构建之后也不会被改变。
  • 容器(container):容器是运行中的镜像,包含了单个镜像的运行状态。
  • 仓库(repository):仓库是镜像的集合,可以通过仓库来管理镜像的版本,以及进行发布、下要镜像等操作。

在Linux系统中, Docker 依赖于内核提供的 namespace 来实现进程、文件、网络资源的隔离,cgroup用于实现物理资源(CPU、内存)的隔离,所有的容器与宿主机(host)共享内核。在老版本的Windons系统中,Docker会使用Hyper-V 虚拟化平台创建一个Linux虚拟机,然后所有的操作都通过这个虚拟机进行。在支持WSL(适用于Linux的Windows子系统)的Windows操作系统中,Docker通过WSL进行所有操作。无论是哪种方式,Docker都能实现容器与容器、容器与宿主机的资源隔离。

2.Docker 安装

以 Windows 操作系统为例,从 Docker 官网下载 DockerDesktop 应用,即可进行安装。

Install Docker Engine on Fedora | Docker Docs

如果windows版本比较低,下载低版本的,这里提供

4.4.4window版本

在Windows 10 2004及以上版本号的计算机上进行安装时,Docker安装程序会提示可以使用WSL2这样的安装选项,如图所示。
如果不选择此选项,Docker会使用Hyper-V技术来实现虚拟化,性能会比WSL2差一些。如果没有安装过WSL 2, Docker Desktop安装程序还会提示用户到微软官网去下载WSL的完整工具包,如图所示,根据提示操作即可。



在 Dooker Desktop 安装完成后,用鼠标左键单击“start”打开Docker,如果是第一次使用Doked会提示用户进行基础教程学习,如图5-25所示。

在实际使用中,建议使用命令行进行Docker相关的操作,如构建镜像、发布镜像、运行容器等。

注意:安装完会重启电脑,切记保存文件哦!!!

3.制作 Docker 镜像

制作Docker 镜像并不复杂,重点是要写好 DockerfileDocker 会按照 Dockerfile 中定义的步骤,在宿主机中构建镜像。

Dockerfile的命令一共有11个:FROM、RUN、CMD、ENTRYPOINT、EXPOSE、ARG、ENV、ADD、 COPY、 WORKDIR VOLUME
接下来,让我们为后端项目制作镜像。首先创建一个文件夹作为工作目录,这里以 BootHello-Docker 为例,然后将后端项目中的 jar 包复制到工作目录中,如图所示。


同时,在该工作目录中创建Dockerfile文件(注意,Dockerfile 没有扩展名),文件中的内容如代码所示。

FROM openjdk:17
# 拷贝 jar 包到镜像中
ADD springboot-test1-0.0.1-SNAPSHOT.jar /opt
# 设定时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
WORKDIR /opt
# 设置暴露的端口
EXPOSE 8080
# 启动命令
CMD java -jar springboot-test1-0.0.1-SNAPSHOT.jar

第1行的FROM指令标记了镜像的基础包来源于openjdk:17,这个基础包仅包含了基础的Java运行环境。第3行的ADD指令将jar包拷贝到/opt目录中,第5行设置时区是为了让启动后打印的日志使用北京时间,这是因为镜像的默认时间一般都是UTC时间,与北京时间相差8小时。第7行设置了镜像内的工作目录为/opt目录,结合第11行的CMD指多相当于执行命令时会先切换到/opt目录。

如果没有jdk17,输入下面的命令拉取JDK17的镜像文件

 docker pull openjdk:17

现在可以使用命令进行镜像的构建,运行时要确保当前目录为创建的工作目录。构建镜像的代码所示。

docker build -t boot-hello/jeelp:0.1 .

-t是tag的缩写,即为构建的镜像作标记,boot-hello/jeelp:0.1指当前镜像为boot-hello的镜像在jeelp的组织下,版本号为0.1。最后的参数“.”代表以当前目录中的Dockerfile构建镜像。

 可以看到Docker在构建镜像时,严格按照 Dockerfile中的步骤进行,并且每一步操作都会成为镜像中的一层。
此时使用 docker images 命令,即可看到刚才构建的镜像,如图所示

 4.运行 Docker 镜像

如果想运行镜像,使用 docker run命令即可,如代码所示。

docker run -d -p 8080:8080 --name boot-hello boot-hello/jeelp:0.1

-d指令是指Docker 容器在后台运行,-p 8080:8080指将容器的8080端口映射到宿主机的8080端口,--name boot-hello 指为容器取名为 boot-hello。执行命令后,Docker会将容器的ID返回到控制台中。
此时可以使用docker ps命令,查看当前运行的容器,如图所示。

当运行镜像时,可以在宿主机中访问http://localhost:8080,对运行中的容器的镜像内容进行验证。

  • 21
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
### 回答1: Vue3和Spring Boot是两种不同的技术,用于前后端分离项目的开发。 Vue3是一种现代化的JavaScript框架,用于构建用户界面。它提供了诸多强大的工具和功能,使开发人员能够快速构建响应式的单页面应用。Vue3具有更高的性能和更好的可维护性,同时还引入了一些新的特性,如Composition API和Teleport等,使开发更加便捷。 Spring Boot是一种用于构建Java后端应用的框架。它提供了一套简化的开发流程,可以快速搭建和配置项目,并提供了丰富的功能来处理数据、安全性和其他常见的后端需求。Spring Boot采用了约定优于配置的原则,使得开发人员可以专注于业务逻辑的实现。 在前后端分离项目中,可以通过Vue3来开发前端应用,通过发送HTTP请求来与后端进行通信。后端使用Spring Boot来处理这些请求,处理业务逻辑,并将结果返回给前端前后端的通信可以使用JSON等数据格式进行交互。 前后端分离项目的优点是可以实现前后端职责的解耦,提高开发效率和可维护性。前端可以专注于用户界面的设计和交互逻辑,后端可以专注于业务逻辑的处理和数据的存储。同时,前后端可以同时进行开发,加快项目的上线速度。 总结来说,使用Vue3和Spring Boot进行前后端分离项目的开发,可以使开发人员能够充分发挥各自的优势,提高开发效率和项目的可维护性。同时,前后端分离项目也能够更好地适应现代化的软件开发需求,提供更好的用户体验和性能。 ### 回答2: Vue3 Spring Boot前后端分离项目是将前端后端的开发分为两个独立的团队,分别负责开发前端后端模块,最后通过接口进行数据的交互和通信。 Vue3是一种新一代的JavaScript框架,用于构建用户界面。它建立在Vue.js的基础上,在性能和开发体验上进行了改进。Vue3使用了Composition API,提供了更灵活、可重用和可组合的代码结构,可以更好地管理组件逻辑。 Spring Boot是一个基于Java的开发框架,用于构建独立的、可扩展的和生产就绪的后端应用程序。它大大简化了Java后端的开发流程,提供了自动化配置和快速开发的特性。 在Vue3 Spring Boot前后端分离项目中,前端团队使用Vue3构建用户界面,实现展示数据和交互逻辑。后端团队使用Spring Boot开发RESTful接口,处理前端的请求并进行数据处理和存储。前后端通过接口进行通信,前端发送请求给后端后端返回相应的数据给前端前后端分离项目的好处是可以实现前后端的解耦,各自团队可以专注于自己的领域,提高开发效率和协作效果。同时,前后端分离项目也可以使得前端后端可以独立部署和升级,提高了系统的可维护性和扩展性。 总之,Vue3 Spring Boot前后端分离项目通过利用Vue3和Spring Boot的优势,实现前后端独立开发和交互,提供了更好的开发体验和协作效果。 ### 回答3: Vue3 是一种流行的前端开发框架,而Spring Boot 是一种常用的后端开发框架。在前后端分离项目中使用 Vue3 和 Spring Boot 可以实现前后端分离的架构。 在这种架构中,前端后端是独立开发和部署的,彼此通过 RESTful API 进行通信。前端使用 Vue3 来构建用户界面,处理用户交互,并向后端发送请求。后端使用 Spring Boot 来处理请求,执行业务逻辑,并返回相应的数据给前端Vue3 提供了强大的数据绑定和组件化的功能,可以方便地构建用户界面,并实现丰富的用户交互。它还提供了一些有用的工具和插件,例如 Vue Router 和 Vuex,用于路由管理和状态管理。通过使用这些功能,我们可以更好地组织和管理前端代码。 Spring Boot 是一个快速开发和部署的框架,它提供了很多现成的功能和插件,使后端开发更加高效。使用 Spring Boot,我们可以很方便地定义 RESTful API,处理请求和返回响应。它还提供了许多有用的功能,例如数据库访问、安全认证和日志记录。 在 Vue3 和 Spring Boot 的配合下,我们可以实现前后端分离的开发模式,提高开发效率和代码质量。前端后端开发人员可以并行工作,互不干扰。同时,前后端分离的架构也能为项目带来更好的可维护性和可扩展性。因此,Vue3 和 Spring Boot 的组合是一个理想的选择,用于构建现代化的前后端分离项目
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海绵不是宝宝817

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值