Vite+Vue3+SpringBoot项目如何打包部署
Vue+SpringBoot项目如何打包部署
Springboot后端打包
这里我以jar包的方式进行打包
1、我们需要在Pom.XML文件里面确保有maven的依赖：
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
通过这个插件我们可以将项目打包成一个可运行的jar文件，无需在tomact服务器上面运行
IDEA默认的打包方式是repackage，通过Spring-boot-maven-plugin插件我们可以将项目打包成两个在target目录下的文件：一个是以jar为后缀，另一个是以.jar.original为后缀
.jar文件：是可执行jar包，包含了pom中的所有依赖，可以直接用java -jar 命令执行
.jar.original文件：是普通jar包，不包含依赖。这是Maven在Spring Boot重新打包之前创建的原始jar文件。（只包含少量用户的类，不包含依赖）
在项目部署的时候我们使用jar包，如果是给别的项目用我们需要使用**.jar.original** 这个包
以下是具体的打包步骤：
看到SUCCESS则说明我们已经打包成功
在项目目录我们可以发现多了一个target的目录，可以里面包含了 .jar和.jar.original的两个包
如果需要重新打包，我们则可以双击clean，清除target目录，再次点击package进行打包
部署运行jar包
项目打包完成后，我们可以使用终端进入target路径，在我们本地的终端上运行我们的jar包
执行命令：
java -jar springboot-0.0.1-SNAPSHOT.jar
项目不报错，则说明我们的项目已经部署成功，可以正常使用对应的路径进行访问对应的接口。
前端打包
🚀在学习vite+vue3打包之前我们需要了解Nginx
🎆 Nginx
Nginx 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。它以其高稳定性、丰富的功能集、便捷的配置以及对高负载的良好支持而闻名。Nginx 被广泛用于托管网站、实现负载均衡以及作为反向代理来缓存数据并提高响应速度。
🌟主要特点
高性能：Nginx 设计用于实现高并发连接，可以处理大量的请求而不牺牲性能。
低资源消耗：相比于其他 web 服务器如 Apache，Nginx 在处理静态文件方面消耗更少的内存。
反向代理：它可以作为反向代理服务器，为后端服务提供负载均衡，并且能够缓存数据以减轻后端服务器的压力。
模块化设计：通过使用第三方模块扩展功能，如日志分析、健康检查等。
高可用性与负载均衡：支持多种负载均衡算法，如轮询（Round Robin）、最少连接（Least Connections）等。
HTTP/2 支持：支持 HTTP/2 协议，允许在单个 TCP 连接上进行多路复用，提高传输效率。
TLS/SSL 支持：支持安全连接，并且可以通过配置 SSL/TLS 证书来加密通信。
易于配置：Nginx 的配置文件语法简洁，便于理解和修改。
💫使用场景
Web 服务器：可以直接用来托管静态文件或作为动态内容服务器。
反向代理：隐藏并保护后端服务器，同时提供负载均衡和缓存功能。
邮件代理服务器：处理电子邮件流量，支持 IMAP、POP3 和 SMTP 协议。
微服务网关：在现代的微服务体系结构中充当 API Gateway。
使用Nginx代理的目的
在平常开发中我们都是前后端进行数据交互，在我们使用工具的时候它会为我们提供proxy代理因此解决了开发环境的跨域请求问题，当我们的项目上线需要重新处理，这是我们就需要Nginx来帮我们做proxy代理.
解决跨域问题：由于浏览器的同源策略，Vue项目不能直接去访问第三方接口或者是其他域名下的资源，我们就可以用到Nginx代理进行跨域访问
静态资源缓存：在前端项目中会存在一些静态资源比如js、css、img等文件，通过Nginx实现缓存从而减少了服务器压力和提高网站的性能
负载均衡：当前端项目部署在多台服务器上时，可以通过Nginx来实现负载均衡，将请求发给不同的服务器，提高了系统的稳定性
安装Nginx
官网下载：https://nginx.org/en/download.html
安装
下载完成后，将压缩包解压到本地即可
第一次访问会出现这个弹窗，点击运行访问
通过下面的命令查看Nginx是否启动成功
tasklist /fi “imagename eq nginx.exe”
当我们再次点击Nginx图标的时候，再来查看Nginx的运行状态发现已经运行正常了
打包Vue
在项目根目录打开终端，运行npm run build
复制打包项目的dist路径
找到Nginx安装的路径找到conf文件夹的nginx.conf配置文件：
完成修改并保存。再次执行以下命令
先把Nginx停了：
nginx -s stop
然后启动：
start nginx
其实重启之后它就会去重新扫描配置文件了，下面这条命令可以省略。
需要重新加载以下配置文件：
nginx -s reload
我们根据我们配置的端口号去访问项目，只要Nginx启动的时候都可以随时访问项目
今天的分享就到这里啦，小江会一直与大家一起努力，文章中如有不足之处，还请指出哦，感谢支持，持续更新中 ……
原文地址：https://blog.csdn.net/weixin_53752776/article/details/142647140
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！