為什么記錄有子路徑項目的部署，因為，通過子路徑可以區分項目，那么也就可以實現微前端架構，并且具有獨特優勢，每個項目都是絕對隔離的。

要將 Vue3 項目（如路徑為?http://www.abc.com:3022/m-saas-pc/#/snow）部署到服務器，需確保靜態資源正確托管并配置路由回退，以下是詳細步驟和注意事項：

一、?構建生產環境靜態文件

1.1、執行構建命令

在項目根目錄運行以下命令，生成?dist?文件夾（包含優化后的 HTML、CSS、JS）：

npm run build

1.2、關鍵配置

vue.config.js（若使用 Vue CLI）：

確保?publicPath?配置正確。若項目部署在子路徑（如?/m-abc-pc），需設置：

export default defineConfig({base: '/m-abc-pc/', // 部署的子路徑 / 指定靜態資源的基礎路徑
}}

1.3、路由模式

若使用?history?模式（無?#），需額外配置服務器；若使用?hash?模式（有?#），則無需修改路由配置。

二、部署靜態文件到服務器

2.1、選擇服務器

Nginx（推薦）：高性能、易配置。

Apache：需配置?.htaccess。

云服務：如阿里云 OSS、騰訊云 COS（需額外配置 CDN 和回源規則）。

2.2、上傳文件

將?dist?文件夾內容上傳到服務器指定目錄（如?/var/www/m-abc-pc）。

三、配置服務器（以 Nginx 為例）

3.1、安裝 Nginx

sudo apt update && sudo apt install nginx -y

3.2、配置虛擬主機

編輯 Nginx 配置文件（如?/etc/nginx/sites-available/m-abc-pc）：

server {listen 80;server_name your_domain.com; # 替換為你的域名或服務器 IProot /var/www/m-abc-pc; # 指向 dist 文件夾index index.html;location / {try_files $uri $uri/ /index.html; # 關鍵：處理前端路由}
}

3.3、啟用配置并重啟 Nginx

sudo ln -s /etc/nginx/sites-available/m-abc-pc /etc/nginx/sites-enabled
sudo nginx -t # 測試配置
sudo systemctl restart nginx

4. 驗證部署

4.1、訪問項目

通過瀏覽器訪問?http://your_domain.com/m-abc-pc/#/snow，確認頁面正常加載且路由跳轉無問題。

4.2、常見問題排查

404 錯誤：檢查?try_files?配置是否正確。

資源路徑錯誤：確認?publicPath?與部署路徑一致。

跨域問題：若后端 API 跨域，需在服務器或后端配置 CORS。

---

5. 高級配置（可選）

5.1、HTTPS 配置

HTTPS 配置：
使用 Let's Encrypt 免費證書：

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your_domain.com

5.2、CDN 加速

將靜態資源托管到 CDN（如 Cloudflare），減少服務器壓力。

5.3、自動化部署

使用 CI/CD 工具（如 GitHub Actions）自動化構建和部署流程。

六、總結

構建靜態文件：確保?publicPath?和路由模式正確。

上傳文件：將?dist?文件夾上傳到服務器。

配置服務器：使用 Nginx 或其他服務器配置靜態資源托管和路由回退。

驗證和優化：檢查訪問是否正常，并配置 HTTPS 和 CDN（可選）。

通過以上步驟，你的 Vue3 項目即可在服務器上正常運行，并支持?hash?模式的路由跳轉。

七、歡迎交流指正