打包 JAR 文件通常使用 Maven 或 Gradle 构建工具（Spring Boot 项目默认推荐 Maven）。以下是详细步骤和常见问题解答：

一、后端 Maven打包 JAR 文件

1. 确保项目是 Spring Boot 项目

项目结构应包含 pom.xml（Maven 配置文件）。
父依赖需包含 Spring Boot Starter：

<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.1.0</version> <!-- 使用最新版本 -->
</parent>

2. 执行 Maven 打包命令

在项目根目录（含 pom.xml 的目录）下运行：

mvn clean package

在这里插入图片描述
clean：清理之前编译的文件。
package：编译代码并打包成 JAR 文件。

3. 生成的可执行 JAR 文件

打包完成后，JAR 文件会出现在 target/ 目录下：

target/
└── your-app-0.0.1-SNAPSHOT.jar  # 示例文件名

在这里插入图片描述

可执行 JAR：Spring Boot 默认会生成包含所有依赖的 fat JAR（直接运行 java -jar 即可启动）。

4. 运行 JAR 文件

jar包所在路径执行包

java -jar your-app-0.0.1-SNAPSHOT.jar

在这里插入图片描述

二、前端打包dist文件夹

1. 确保环境配置正确

Node.js 和 npm/yarn：确保已安装，并通过以下命令验证：

node -v
npm -v  # 或 yarn -v

2. 进入前端项目根目录

打开终端（Windows：CMD/PowerShell；Mac/Linux：Terminal），导航到前端项目目录：

**cd /path/to/your-frontend-project  # 替换为实际路径**

在这里插入图片描述

3. 安装项目依赖

如果项目是首次运行或依赖未安装，执行：

npm install  # 或 yarn install

此命令会根据 package.json 安装所有依赖库。

4. 构建生产环境代码

（1）Vue 项目（使用 Vue CLI）：

npm run build

默认会在项目根目录生成 dist/ 文件夹，包含编译后的静态文件（HTML、CSS、JS、资源文件等）。
（2）React 项目（使用 Create React App）：

npm run build

生成的文件默认在 build/ 文件夹中。若需输出到 dist/，可修改 package.json 中的 build 脚本或配置 webpack。
（3）自定义配置：
如果项目使用自定义 Webpack 配置，检查 webpack.prod.js 或类似文件，确认输出路径为 dist/：

output: {path: path.resolve(__dirname, 'dist'),  // 确保路径正确filename: '[name].[contenthash].js'
}

在这里插入图片描述

5.验证 dist 文件夹

构建完成后，检查项目根目录是否生成 dist/ 文件夹，并包含以下内容：

dist/
├── index.html          # 主入口文件
├── static/             # 静态资源（CSS、JS、图片等）
│   ├── css/
│   ├── js/
│   └── images/
└── assets/             # 其他资源（如字体）

如果文件夹为空或未生成，检查构建日志是否有错误。
在这里插入图片描述

6. 部署 dist 文件夹

直接部署前端到 Nginx/Apache 和 集成到 Spring Boot 后端 的主要区别确实体现在 身份验证（登录）处理、路由控制 和 部署耦合性 上。

（1）直接部署：将 dist/ 文件夹内容上传到服务器（如 Nginx、Apache 的静态资源目录）。
（2）集成到后端（如 Spring Boot）：
将 dist/ 中的所有文件复制到后端项目的 src/main/resources/static/ 目录。
重新打包后端 JAR/WAR 文件，启动后即可通过后端服务访问前端页面。
在这里插入图片描述

集成到 Spring Boot 的潜在问题：
(1) 登录拦截导致前端资源无法访问
问题场景：
后端配置了 Spring Security，拦截所有请求（包括静态资源）。
例如：访问 /css/app.css 时，后端返回登录页（302 重定向到 /login）。
错误表现：
浏览器控制台报错：Failed to load resource: the server responded with a status of 302。
页面样式/脚本加载失败，显示为空白或未格式化的内容。
(2) 路由冲突
问题场景：
前端使用 Vue Router/React Router 的 history 模式（如 /about、/profile）。
后端未配置全局路由回退到 index.html，导致直接访问这些路径时返回 404。
错误表现：
刷新页面或直接输入 URL 时，显示 Whitelabel Error Page（Spring Boot 默认 404 页面）。

三、通过后端服务访问前端页面（集成到后端）

1.打开文件资源管理器（Windows）或终端（Mac/Linux），将前端 dist/ 文件夹内的所有内容（不是 dist/ 本身）复制到后端项目的：

src/main/resources/static/

最终目录结构：

src/
└── main/└── resources/└── static/├── index.html├── static/│   ├── css/│   ├── js/│   └── images/└── assets/

在这里插入图片描述

2.重新打包后端项目

Maven 项目

cd /path/to/backend-project  # 进入后端项目目录
mvn clean package           # 清理并重新打包

生成的 JAR/WAR 文件在 target/ 目录下（如 your-app-0.0.1-SNAPSHOT.jar）。
Gradle 项目

cd /path/to/backend-project  # 进入后端项目目录
./gradlew clean build       # 清理并重新打包

3.启动后端服务

启动 Spring Boot 应用

java -jar your-app-0.0.1-SNAPSHOT.jar

默认端口为 8080，访问 http://localhost:8080 即可看到前端页面。

注意：
（1）如果显示404，改为http://localhost:8084/your-path/
在这里插入图片描述
（2）如果显示{"code":401,"msg":"No Authorization"}，表示你的请求未通过 身份验证（Authentication） 或 授权（Authorization） 检查。
01 状态码：HTTP 401 表示 未授权（Unauthorized），通常由以下原因导致：
①请求未携带 认证凭证（如 Token、Cookie、Session ID）。
②携带的凭证 已过期 或 无效。
③后端接口配置了 安全策略（如 Spring Security、JWT、OAuth2），但前端未正确处理。

四、Nginx安装与部署

（1）下载

Nginx官网
在这里插入图片描述
下载到本地，进入 Nginx 目录下，conf 文件夹下编辑 nginx.conf 文件，根据自己需求进行配置
在这里插入图片描述

（2）配置nginx.conf

把前端dist重命名为test放在html下面，以后不同项目dist都放在这里以不同文件夹命名存放。
在这里插入图片描述在这里插入图片描述

server {listen       82;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;# 处理前端路由（如 Vue/React 的 history 模式）location / {# 相对路径：你的dist即test在nginx里的目录root   html/test;# 默认访问 index.htmlindex  index.html index.htm;try_files $uri $uri/ /index.html;}# 可选：代理 API 请求（如 /api/ 转发到后端：在vue.config里proxy下确认有没有）location /api/ {proxy_pass http://127.0.0.1:8084/your-path/;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html# 错误页面配置（可选）error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}
}

在这里插入图片描述

（3）nginx双击闪退

server里listen的是82，在排除端口82已经被占用的情况下；
在你nginx下载目录上cmd：
在这里插入图片描述
输入nginx -t
在这里插入图片描述
Nginx 的配置文件必须包含 http、events 和 server 等核心块,

简单来说，我不小心把sever上面http、event不小心删了。。。
在这里插入图片描述

# 全局配置（必须包含 events 和 http）
events {# 即使为空也必须存在worker_connections 1024;  # 可选：设置每个 worker 进程的最大连接数
}http {# 通用配置（如 gzip、log_format）include       mime.types;default_type  application/octet-stream;# server 块必须放在这里！server {listen       82;server_name  localhost;location / {root   html/test;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://127.0.0.1:8084/your-path/;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}  
}

在这里插入图片描述
通过http://127.0.0.1:82/可以访问页面了。如果是登陆页面，记得redis也要启动。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/87687.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/87687.shtml
英文地址，请注明出处：http://en.pswp.cn/web/87687.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

大数据系列 | 日志数据采集工具Filebeat的架构分析及应用

大数据系列 | 日志数据采集工具Filebeat的架构分析及应用

大数据系列 | 日志数据采集工具Filebeat的架构分析及应用 1. Filebeat的由来2. Filebeat原理架构分析3. Filebeat的应用3.1. 安装Filebeat3.2. 实战采集应用程序日志1. Filebeat的由来 在介绍Filebeat之前，先介绍一下Beats。Beats是一个家族的统称，Beats家族有8个成员，早期的…
阅读更多...
基于 Vue + RuoYi 架构设计的商城Web/小程序实训课程

基于 Vue + RuoYi 架构设计的商城Web/小程序实训课程

以下是基于 Vue RuoYi 架构设计的商城Web/小程序实训课程方案&#xff0c;结合企业级开发需求与教学实践&#xff0c;涵盖全栈技术栈与实战模块&#xff1a; &#x1f4da; 一、课程概述 目标&#xff1a;通过Vue前端 RuoYi后端&#xff08;Spring Boot&#xff09;开发企业…
阅读更多...
Puppeteer 相关漏洞-- Google 2025 Sourceless

Puppeteer 相关漏洞-- Google 2025 Sourceless

题目的代码非常简单,核心只有这一句 page.goto(url, { timeout: 2000 });方案1 Puppeteer 是一个常用的自动化浏览器工具&#xff0c;默认支持 Chrome&#xff0c;但也可以配置支持 Firefox。然而&#xff0c;当 Puppeteer 运行在 Firefox 上时&#xff0c;会自动关闭一些安全特…
阅读更多...
LucidShape 2024.09 最新

LucidShape 2024.09 最新

LucidShape的最新版本2024.09带来了一系列新功能与增强功能&#xff0c;旨在解决光学开发者面临的最常见和最复杂的挑战。从微透镜阵列&#xff08;MLA&#xff09;的自动掩模计算&#xff0c;到高级分析功能的改进&#xff0c;LucidShape 2024.09致力于简化工作流程并增强设计…
阅读更多...
mini-electron使用方法

mini-electron使用方法

把在官方群里“官方132版”目录里下载的包里的minielectron_x64.exe解压到你本地某个目录&#xff0c;改名成electron.exe&#xff0c;比如G:\test\ele_test\mini_electron_pack\electron.exe。 修改你项目的package.json文件。一个例子是&#xff1a; {"name": &q…
阅读更多...
Android 网络全栈攻略（七）—— 从 OkHttp 拦截器来看 HTTP 协议二

Android 网络全栈攻略（七）—— 从 OkHttp 拦截器来看 HTTP 协议二

Android 网络全栈攻略系列文章&#xff1a; Android 网络全栈攻略&#xff08;一&#xff09;—— HTTP 协议基础 Android 网络全栈攻略&#xff08;二&#xff09;—— 编码、加密、哈希、序列化与字符集 Android 网络全栈攻略&#xff08;三&#xff09;—— 登录与授权 Andr…
阅读更多...
45-使用scale实现图形缩放

45-使用scale实现图形缩放

45-使用scale实现图形缩放_哔哩哔哩_bilibili45-使用scale实现图形缩放是一次性学会 Canvas 动画绘图&#xff08;核心精讲50个案例&#xff09;2023最新教程的第46集视频&#xff0c;该合集共计53集&#xff0c;视频收藏或关注UP主&#xff0c;及时了解更多相关视频内容。http…
阅读更多...
软件开发早期阶段，使用存储过程的优势探讨：敏捷开发下的利器

软件开发早期阶段，使用存储过程的优势探讨：敏捷开发下的利器

在现代软件开发中&#xff0c;随着持续集成与敏捷开发的深入推进&#xff0c;开发团队越来越重视快速响应需求变更、快速上线迭代。在这种背景下&#xff0c;传统将业务逻辑全部放在应用层的方式在某些阶段显得笨重。本文将探讨在软件开发初期&#xff0c;特别是在需求尚不稳定…
阅读更多...
『 C++入門到放棄 』- string

『 C++入門到放棄 』- string

C 學習筆記 - string 一、什麼是string ? string 是 C 中標準函數庫中的一個類&#xff0c;其包含在 中 該類封裝了C語言中字符串操作&#xff0c;提供內存管理自動化與更多的操作 支持複製、比較、插入、刪除、查找等功能 二、常用接口整理 類別常用方法 / 說明建立與指…
阅读更多...
ARM架构下C++程序堆溢出与栈堆碰撞问题深度解析

ARM架构下C++程序堆溢出与栈堆碰撞问题深度解析

ARM架构下C程序堆溢出与栈堆碰撞问题深度解析 一、问题背景&#xff1a;从崩溃现象到内存异常 在嵌入式系统开发中&#xff0c;程序崩溃是常见但棘手的问题。特别是在ARM架构设备上&#xff0c;一种典型的崩溃场景如下&#xff1a;程序在执行聚类算法或大规模数据处理时突然终…
阅读更多...
.NET9 实现排序算法（MergeSortTest 和 QuickSortTest）性能测试

.NET9 实现排序算法（MergeSortTest 和 QuickSortTest）性能测试

在 .NET 9 平台下&#xff0c;我们对两种经典的排序算法 MergeSortTest&#xff08;归并排序&#xff09;和 QuickSortTest&#xff08;快速排序&#xff09;进行了性能基准测试&#xff08;Benchmark&#xff09;&#xff0c;以评估它们在不同数据规模下的执行效率、内存分配及…
阅读更多...
RabbitMQ - SpringAMQP及Work模型

RabbitMQ - SpringAMQP及Work模型

一、概述RabbitMQ是一个流行的开源消息代理&#xff0c;支持多种消息传递协议。它通常用于实现异步通信、解耦系统组件和分布式任务处理。Spring AMQP是Spring框架下的一个子项目&#xff0c;提供了对RabbitMQ的便捷访问和操作。本文将详细介绍RabbitMQ的工作模型&#xff08;W…
阅读更多...
微信小程序51~60

微信小程序51~60

1.界面交互-loading提示框 loading提示框用于增加用户体验&#xff0c; 对应的API有两个&#xff1a; wx.showLoading()显示loading提示框wx.hideLoading()关闭loading提示框 Page({getData () {//显示loading提示框wx.showLoading({//提示内容不会自动换行&#xff0c;多出来的…
阅读更多...
SqueezeBERT：计算机视觉能为自然语言处理在高效神经网络方面带来哪些启示？

SqueezeBERT：计算机视觉能为自然语言处理在高效神经网络方面带来哪些启示？

摘要 人类每天阅读和撰写数千亿条消息。得益于大规模数据集、高性能计算系统和更优的神经网络模型&#xff0c;自然语言处理&#xff08;NLP&#xff09;技术在理解、校对和组织这些消息方面取得了显著进展。因此&#xff0c;将 NLP 部署于各类应用中&#xff0c;以帮助网页用…
阅读更多...
Springboot开发常见注解一览

Springboot开发常见注解一览

注解用法常用参数Configuration用于标记类为配置类&#xff0c;其中通过Bean方法定义Spring管理的组件。它替代XML配置&#xff0c;用Java代码声明对象创建逻辑&#xff0c;并确保单例等容器特性生效。相当于给Spring提供一个“制造说明书”来组装应用部件RestControllerRestCo…
阅读更多...
Maven高级——分模块设计与开发

Maven高级——分模块设计与开发

目录 ​编辑 分模块设计与开发 拆分策略 继承与聚合 版本锁定 聚合 作用 实现 Maven中继承与聚合的联系与区别&#xff1f; 联系 区别 私服 分模块设计与开发 将一个大项目拆分成若干个子模块&#xff0c;方便项目的管理维护&#xff0c;扩展&#xff0c;也方便模…
阅读更多...
线程池的七个参数设计源于对高并发场景下资源管理、系统稳定性与性能平衡的深刻洞察

线程池的七个参数设计源于对高并发场景下资源管理、系统稳定性与性能平衡的深刻洞察

⚙️ 一、核心参数设计目标与解决的问题 参数设计目标解决的核心问题典型取值策略corePoolSize&#xff08;核心线程数&#xff09;维持常备线程资源避免频繁创建/销毁线程的开销&#xff0c;提高响应速度CPU密集型&#xff1a;N_cpu 1 IO密集型&#xff1a;2 N_cpu maximum…
阅读更多...
少样本学习在计算机视觉中的应用：原理、挑战与最新突破

少样本学习在计算机视觉中的应用：原理、挑战与最新突破

在深度学习的黄金时代&#xff0c;大量标注数据似乎成了算法性能的前提。然而在许多现实场景中&#xff0c;如医疗图像分析、工业缺陷检测、遥感识别、甚至个性化视觉服务中&#xff0c;高质量、成规模的标注数据往往昂贵、稀缺&#xff0c;甚至难以获得。这种场景正是**少样本…
阅读更多...
github在线图床

github在线图床

github做的图床&#xff0c;原理是利用github API实现的在线上传&#xff0c;就一个页面&#xff0c;css和js都是集成在页面&#xff0c;相关信息保存在浏览器缓存中&#xff0c;配置一下即可使用 效果演示&#xff1a; github在线图床 打开网站填写下列信息 github用户名&a…
阅读更多...
css-多条记录，自动换行与自动并行布局及gap兼容

css-多条记录，自动换行与自动并行布局及gap兼容

实现这样的内容布局&#xff0c;当一段文案长度超过当前行的时候自动占据一行&#xff0c;其他相近的不超过一行自动放在一行间隔隔开 关键实现原理&#xff1a; 弹性布局容器&#xff1a; .history-container {display: flex;flex-wrap: wrap;gap: 12px; }使用flex-wrap: wr…
阅读更多...
最新文章

Copyright @ 2022~2023