LAH-FE 為地政智慧控管系統的 Web 前端應用程式,主要透過 HTTP REST API 與 LAH-API 伺服器溝通,並透過 WebSocket 與 lah-messenger-server 進行即時通訊。
本專案採 純靜態 SPA (Static SPA) + PM2 背景排程 的雙軌架構:
- 前端網站 (Static SPA):透過 Nuxt 2 的
yarn generate編譯為純靜態 HTML/JS/CSS(輸出至dist/目錄),由 Apache 8080 連接埠作為虛擬主機(DocumentRoot)直接託管。 - 背景排程服務 (LAH-SCHEDULER):由 PM2 常駐守護
scheduler/server.js,負責定時排程、健康檢測與環境變數監控。 - 執行期動態設定 (Runtime Config):靜態頁面透過
/runtime-config.js載入環境變數(window.__LAH_CONFIG__)。此檔案由LAH-SCHEDULER或安裝更新工具自伺服器本機的.env自動產出,確保靜態前端無需重新編譯即可即時套用正式環境組態。
- 核心框架:Nuxt.js (
2.15.8) - 視圖框架:Vue.js (
2.7.16) - UI 元件庫:BootstrapVue (
2.23.0) - 樣板引擎:Pug (
^3.0.2) - 樣式編譯:Dart Sass (
sass ^1.77.0,sass-loader ^10.2.0) - 圖表庫:Chart.js (
3.9.1)、vue-chartjs (^4.0.3) - HTTP 客戶端:@nuxtjs/axios (
^5.12.2) - 執行期環境:支援 Node.js v18 至 v26+(已全面相容最新可攜式 Node.js v26.13.0)
專案目錄遵循 Nuxt 2 規範與專案模組職責劃分:
/assets:存放 SCSS 樣式、未編譯圖檔與全域資源。/components:存放可重複使用的 Vue 元件(遵循lah-*.vue命名慣例,並內建移植自即時通之lah-messenger-*.vue元件群)。/layouts:應用程式整體佈局,定義共用的頁首、側邊欄與頁尾。/mixins:共用 Vue Mixin 邏輯(如動態高度計算、資料快取存取等)。/pages:業務頁面與路由目錄,結構自動映射至系統 URL 路徑。/plugins:Vue 實例插件(如 axios 攔截器、Font Awesome 等)。/scheduler:背景服務程式碼(包含排程伺服器server.js與定時任務)。/store:Vuex 狀態管理模組(按業務劃分,如auth、inf、regcase等)。/static:純靜態外部資源目錄。yarn-build.bat:一鍵靜態網頁產製工具(自動適應 Node v26 與 OpenSSL legacy provider,建置後開啟dist/目錄)。ecosystem.config.js:PM2 常駐守護程序設定檔(定義LAH-SCHEDULER)。nuxt.config.js:Nuxt 設定檔(宣告 SPA 靜態產製目標、代理伺服器規則與插件)。
啟動開發伺服器前,請建立 .env 檔案:
# 複製範本建立設定檔
cp .env.example .env請依本機或測試環境調整 .env 內容(如 API_HOST、API_PORT、WEBSOCKET_HOST 等)。
Caution
部署至遠端伺服器時,切勿使用本機開發的 .env 覆蓋遠端檔案,以免導致正式站台連線組態失效。
本專案支援現代 Node.js 執行期(Node.js v18 / v20 / v22 / v26+):
yarn install執行以下指令啟動具備熱重載(Hot Reload)的前端開發伺服器:
yarn dev開發伺服器預設運行於 http://localhost:8080。
若要產製供 Apache 託管或複製至遠端安裝目錄的靜態網頁:
-
方式一:執行一鍵產製腳本(推薦)
在 Windows 檔案總管雙擊或於終端機執行:yarn-build.bat
該腳本會自動偵測 Node 執行期、注入
--openssl-legacy-provider、執行yarn generate並於完成後自動開啟dist\資料夾。 -
方式二:手動執行 Yarn 指令
在 Node 17+ 環境下需帶上 OpenSSL 相容旗標:$env:NODE_OPTIONS = "--openssl-legacy-provider" yarn generate
產出之純靜態檔案位於
dist\目錄。
- 智慧控管(登記課):處理登記案件管理、即時狀態追蹤、逾期預警、補正展期與業務統計。
- 測量小幫手(測量課):處理測量外業案件排程、成果圖資查詢與自動化試算。
- 智慧監控(資訊課):提供資訊機房戰情看板、PowerHA 高可用狀態、主機資源負載、連線監控與資料庫備份檢測。
- 地價小幫手(地價課):處理地價查調、歷史地價比較與相關統計工具。
- 系統管理(系管課):使用者帳號管理、權限角色設定、操作稽核紀錄與系統參數配置。
- 即時通訊模組(跨課室協作):內嵌桃園即時通通訊元件,提供頻道公告、線上即時對話與附件傳遞功能。
詳細版本演進與修改歷程請參閱 CHANGELOG.md。
