打包 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也要啟動。