# :-: 前端配置說明 ## 業務配置 除了 setting.env.js 配置外，還有另外一個配置，即`src/setting.js`配置，基本上絕大部分的配置都在這個文件里完成。使用者可根據自己的 UI 習慣來修改不同的配置，從而實現不同的布局效果。 詳細的配置介紹如下： ### 基礎配置 * **titleSuffix**：網頁標題的后綴，配置后，每個頁面的標題都會帶有后綴，比如 "業務配置 - iView Admin Pro"，為空則不顯示后綴 * **routerMode**：路由模式，可選值為 history 或 hash，默認為`history` * `2.2.0`**routerBase**：應用的基路徑。例如，如果整個單頁應用服務在 /app/ 下，然后 routerBase 就應該設為 '/app/'。默認為`/` * **showProgressBar**：頁面切換時，是否顯示模擬的進度條，默認為`true` * **apiBaseURL**：統一的接口請求地址，可根據當前環境配置不同的值 * **modalDuration**：接口請求返回錯誤時，彈窗的持續時間，單位：秒，默認`3` * **errorModalType**：接口請求返回錯誤時，彈窗的類型，可選值為 Message 或 Notice，默認`Message` * **cookiesExpires**：Cookies 默認保存時間，單位：天，默認`1` ### 多語言配置`1.2.0` * **i18n**： * **default**：默認語言，默認為簡體中文，值為`zh-CN` * **auto**：是否根據用戶電腦配置自動設置語言（僅第一次有效），默認`false` ### 布局配置 * **menuSideWidth**：側邊菜單寬度，單位 px，不可動態修改，如若修改，需同時修改`src/styles/setting.less`文件的 @menuSideWidth 且數值保持一致，默認`256` * **layout**：布局配置，如下： * **siderTheme**：側邊欄風格，可選值為 dark 或 light，默認`dark` * **headerTheme**：頂欄風格，可選值為 light、dark 或 primary，默認`light` * **headerStick**：頂欄是否置頂，開啟后頂欄會覆蓋在側邊欄之上，需開啟 headerFix，默認`false`，建議在有頂級菜單時使用 * **tabs**：是否開啟多 Tabs 頁簽，默認`true` * **showTabsIcon**：多 Tabs 頁簽是否顯示圖標，開啟 tabs 時有效，默認`true` * **tabsFix**：是否固定多 Tabs 多頁簽，開啟 tabs 時有效，默認`true` * `2.2.0`**tabsReload**：再次點擊 Tabs 當前頁簽時，是否重載當前頁面，默認`false` * **siderFix**：是否固定側邊欄，默認`true` * **headerFix**：是否固定頂欄，默認`true` * **headerHide**：是否在下滑時隱藏頂欄，需開啟 headerFix，如果開啟了 tabsFix，Tabs 也會被隱藏，默認`false` * **headerMenu**：是否顯示頂部菜單欄，一般來說，側邊的菜單欄足以滿足大部分業務，如需動態切換側邊欄，可開啟此選項啟用頂部一級菜單，此時側邊欄將作為二級菜單，默認`false` * **menuAccordion**：側邊菜單欄是否開啟手風琴模式，默認`true` * **showSiderCollapse**：是否顯示折疊側邊欄按鈕，移動端下會自動強制開啟，默認`true` * **menuCollapse**：側邊菜單欄是否默認折起，默認`false` * `2.2.0`**menuSiderReload**：再次點擊當前側邊菜單時，是否重載當前頁面，默認`false` * `2.2.0`**menuHeaderReload**：再次點擊當前頂部菜單時，是否重載當前頁面，默認`false` * `1.2.0`**showCollapseMenuTitle**：側邊菜單折起時，是否在子菜單前顯示父級菜單名稱，默認`false` * `1.2.0`**showReload**：是否顯示重載按鈕，默認`true` * **showSearch**：是否顯示搜索，默認`true` * **showNotice**：是否顯示通知，默認`true` * **showFullscreen**：是否顯示全屏，默認`true` * **showMobileLogo**：在手機訪問時，是否在頂部顯示小尺寸 logo，默認`true` * **showBreadcrumb**：是否顯示全局面包屑，開啟 headerMenu 時不可用（如若在開啟 headerMenu 時顯示，可以在頁面中的 PageHeader 使用該組件） * **showBreadcrumbIcon**：全局面包屑是否顯示圖標，開啟 showBreadcrumb 時有效，默認`false` * **showLog**：是否顯示日志入口，開啟與否，不影響日志記錄，如不希望用戶看到可關閉，默認`true` * `1.2.0`**showI18n**：是否顯示多語言切換按鈕，默認`true` * **enableSetting**：是否支持動態修改布局配置，移動端下會自動強制關閉，此功能主要用于開發階段實時預覽各種布局效果，建議在生產環境關閉，默認`true` * **logoutConfirm**：退出登錄時，是否二次確認，默認`true` ### 多頁 Tabs * **page**：配置如下： * **opened**：默認打開的頁簽，默認`[]` ### 功能配置 * `2.1.0`**sameRouteForceUpdate**：相同路由，不同參數間進行切換，是否強力更新，默認為`false`。 > 說明：由于 vue-router 限制，相同路由，不同參數，進行切換時，組件并不是重新加載，而是共享，這會導致切換時，數據狀態并沒有重置。開啟該選項后，在兩個相同路由，不同參數間切換時，頁面會重載。 > 說明：使用該功能，該頁面在路由配置時，必須設置`name`字段。 * `1.3.0`**dynamicSiderMenu**：是否使用動態側邊菜單，默認為`false`。 > 說明：框架默認是在`main.js`中獲取本地側邊菜單的，開啟該選項，則認為是從服務端動態獲取側邊菜單，系統將不再主動獲取本地菜單，而相關菜單獲取邏輯，需開發者自己完成。詳見文檔**基礎功能-添加菜單**。 > 其中，絕大部分布局配置都支持動態配置并實時更新效果。