文章目錄

• 前言
• 1、關於 SoybeanAdmin
• 2、本地部署 SoybeanAdmin 步驟
• 3、簡單使用 SoybeanAdmin
• 4、安裝 cpolar 內網穿透
• 5、配置公網地址
• 6、配置固定二級子域名公網地址
• 總結：

• **結語**

前言

SoybeanAdmin 是一款功能強大的後台管理系統，支持通過拖拽組件快速構建基礎功能頁面，具備主題色修改、佈局縮放等動態樣式調整能力，還內置了豐富的組件和權限管理功能，能滿足不同後台系統的開發需求。

作為一名使用者，我深深體會到 SoybeanAdmin 的高效。它嚴格的代碼規範減少了後期維護的麻煩，自動化路由系統省去了手動配置的時間，多主題和國際化支持讓系統能輕鬆適配不同場景。用它開發後台，省去了很多重複工作，讓我能專注於核心功能實現。

在沒有使用 cpolar 之前，SoybeanAdmin 只能在局域網內使用，限制很多。而有了 cpolar 後，情況完全不同。現在我可以把本地開發的後台服務通過公網地址分享給客户，他們隨時能查看並提出修改意見，不用再等我上傳文件；出差時，我在酒店也能通過手機登錄系統繼續開發；團隊成員在家辦公時，也能實時同步開發進度，協作效率提高了不少。這種不受局域網限制的使用體驗，讓工作變得靈活又便捷。

1、關於 SoybeanAdmin

SoybeanAdmin 是一款集優雅、高效與一身的後台管理系統。它基於 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS 構建，不僅擁有前沿的技術棧，還內置了豐富的主題配置和組件，讓你輕鬆應對各種需求變化。

獨特之處：

• 技術前沿：採用最新的前端技術棧。
• 架構清晰：使用 pnpm monorepo 架構，結構優雅易懂。
• 代碼規範：集成 eslint, prettier 和 simple-git-hooks，保證代碼質量。
• 類型檢查：支持嚴格的 TypeScript 類型檢查。
• 多主題配置：內置多種主題風格，與 UnoCSS 完美結合。
• 國際化方案：輕鬆實現多語言支持。
• 自動化路由系統：自動生成路由導入、聲明和類型。
• 權限管理：靈活的前端靜態路由和後端動態路由。
• 豐富組件：內置 403、404、500 頁面，以及佈局組件、標籤組件等。
• 命令行工具：高效的 git 提交、刪除文件、發佈等操作。
• 移動端適配：完美支持移動端自適應佈局。

2、本地部署 SoybeanAdmin 步驟

需要準備好 git、node.js、pnpm

打開命令行先克隆項目

git clone https://github.com/soybeanjs/soybean-admin.git

接着輸入這行命令更換樣例版分支

git checkout example

進入到項目目錄中，繼續安裝依賴

pnpm i

最後啓動項目，啓動後會自動打開瀏覽器

pnpm dev

就能看到 SoybeanAdmin 的登錄界面了，

3、簡單使用 SoybeanAdmin

登錄進去後能看到界面很美觀，右側可以配置主題，

左側還有各種各樣的設置，比如標籤頁、異常頁、各種插件等等

現在你就可以在本地去開發你的後台管理系統了，但在開發之前，先要把後台樣式效果發給客户確認一下。

我會使用 cpolar 把本地部署的服務發佈到公網，把公網地址發給用户！你肯定會問，為什麼不直接發截圖呢？發截圖肯定沒有實時動態操作的後台模版更有衝擊力呀！

4、安裝 cpolar 內網穿透

訪問 cpolar 官網： https://www.cpolar.com 點擊免費使用註冊一個賬號，並下載最新版本的 Cpolar。

登錄成功後，點擊下載 Cpolar 到本地並安裝（一路默認安裝即可）本教程選擇下載 Windows 版本。

Cpolar 安裝成功後，在瀏覽器上訪問 http://localhost:9200，使用 cpolar 賬號登錄,登錄後即可看到 Cpolar web 配置界面,結下來在 web 管理界面配置即可。

5、配置公網地址

登錄 cpolar web UI 管理界面後,點擊左側儀表盤的隧道管理——創建隧道：

• 隧道名稱：可自定義，本例使用了:soybean，注意不要與已有的隧道名稱重複
• 協議：http
• 本地地址：9527
• 域名類型：隨機域名
• 地區：選擇 China Top
• 點擊高級：選擇 host 頭域，填寫 IP 地址＋端口號：localhost:9527

點擊創建：

創建成功後，打開左側在線隧道列表,可以看到剛剛通過創建隧道生成了兩個公網地址，接下來就可以在其他電腦或者移動端設備（異地）上，使用任意一個地址在瀏覽器中訪問即可。

我們隨意複製一個打開，能看到我們成功打開了 soybeanadmin 的頁面

小結

為了方便演示，我們在上邊的操作過程中使用 cpolar 生成的 HTTP 公網地址隧道，其公網地址是隨機生成的。這種隨機地址的優勢在於建立速度快，可以立即使用。然而，它的缺點是網址是隨機生成，這個地址在 24 小時內會發生隨機變化，更適合於臨時使用。

如果有長期使用 SoybeanAdmin，或者異地訪問與使用其他本地部署的服務的需求，但又不想每天重新配置公網地址，還想讓公網地址好看又好記並體驗更多功能與更快的帶寬，那我推薦大家選擇使用固定的二級子域名方式來配置公網地址。

6、配置固定二級子域名公網地址

使用 cpolar 為其配置二級子域名，該地址為固定地址，不會隨機變化。

注意需要將 cpolar 套餐升級至基礎套餐或以上，且每個套餐對應的帶寬不一樣。【cpolar.cn 已備案】

點擊左側的預留，選擇保留二級子域名，地區選擇 china top，然後設置一個二級子域名名稱，我這裏演示使用的是 soybean，大家可以自定義。填寫備註信息，點擊保留。

保留成功後複製保留的二級子域名地址：

登錄 cpolar web UI 管理界面，點擊左側儀表盤的隧道管理——隧道列表，找到所要配置的隧道 soybeanadmin，點擊右側的編輯。

修改隧道信息，將保留成功的二級子域名配置到隧道中

• 域名類型：選擇二級子域名
• Sub Domain：填寫保留成功的二級子域名
• 地區: China Top

點擊更新

更新完成後，打開在線隧道列表，此時可以看到隨機的公網地址已經發生變化，地址名稱也變成了保留和固定的二級子域名名稱。

總結：

是不是超級簡單？只需要幾條命令，你就擁有了一個功能強大、高顏值的後台管理系統。

而且，它的代碼規範非常嚴格，集成了多種開發工具和插件，讓你的開發工作更加高效

以上就是如何在本地 windows 系統快速部署 soybeanadmin，並安裝 cpolar 內網穿透工具配置固定不變的二級子域名公網地址，實現隨時隨地遠程訪問的全過程，感謝您的觀看，有任何問題歡迎留言交流。

結語

打破局域網限制後，SoybeanAdmin 的價值得到了更大發揮。它與 cpolar 的結合，為開發工作帶來了實實在在的便利，是提升效率的好幫手。

cpolar 官網-安全的內網穿透工具 | 無需公網 ip | 遠程訪問 | 搭建網站