Skip to content
V3-Admin
指南 组件

项目配置项

用于修改项目的配色、布局、缓存、多语言、组件默认配置

环境变量配置

项目的环境变量配置位于项目根目录下的 .env、.env.development、.env.production

具体可以参考 Vite 文档

Terminal window
.env                # 在所有的环境中被载入
.env.[mode]         # 只在指定的模式中被载入

配置项说明

.env

所有环境适用

Terminal window
# 端口号
VITE_PORT=8080
# 网站标题
VITE_GLOB_APP_TITLE=智慧监控平台2.0
# 项目代号
VITE_GLOB_BRAND=psm
# 打包体积大小的分析
VITE_BUILD_REPORT=true

.env.development

开发环境适用

Terminal window
# 资源公共路径,需要以 /开头和结尾
VITE_PUBLIC_PATH=/


# 接口地址
VITE_GLOB_BASE_URL=https://apigw-test.trinablue.com/csde-nem-api/v1.0/test
# 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
VITE_GLOB_API_PREFIX=

.env.production

生产环境适用

Terminal window
# 接口地址 可以由nginx做转发或者直接写实际地址
VITE_GLOB_BASE_URL=/api
# 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
VITE_GLOB_API_PREFIX=
# 是否删除Console.log
VITE_DROP_CONSOLE=true
# 资源公共路径,需要以 / 开头和结尾
VITE_PUBLIC_PATH=/
# 打包是否输出gz｜br文件
# 可选: gzip | brotli | none
# 也可以有多个, 例如 ‘gzip’|'brotli',这样会同时生成 .gz和.br文件
VITE_BUILD_COMPRESS = 'none'
# 是否兼容旧版浏览器。开启后打包时间会慢一倍左右。会多打出旧浏览器兼容包,且会根据浏览器兼容性自动使用相应的版本
VITE_LEGACY = false

生产环境动态配置

_app.config.js
// 变量名命名规则  __PRODUCTION__xxx_CONF__   xxx：为.env配置的VITE_GLOB_APP_SHORT_NAME
window.__PRODUCTION__VUE_VBEN_ADMIN__CONF__ = {
  VITE_GLOB_APP_TITLE: 智慧监控平台2.0
  VITE_GLOB_BRAND:psm
  VITE_GLOB_BASE_URL: '/app',
  VITE_GLOB_API_PREFIX: '/',
};

项目配置

配置文件路径

src/settings/project.setting.js

说明

// ! 改动后需要清空浏览器缓存
const setting: ProjectConfig = {
  // 是否显示SettingButton
  showSettingButton: true,


  // 是否显示主题切换按钮
  showDarkModeToggle: true,


  // 设置按钮位置 可选项
  // SettingButtonPositionEnum.AUTO: 自动选择
  // SettingButtonPositionEnum.HEADER: 位于头部
  // SettingButtonPositionEnum.FIXED: 固定在右侧
  settingButtonPosition: settingButtonPosition.AUTO,


  // 权限模式,默认前端角色权限模式
  // ROUTE_MAPPING: 前端模式（菜单由路由生成，默认）
  // ROLE：前端模式（菜单路由分开）
  permissionMode: permissionMode.SCHEME_2,
  // 权限缓存存放位置。默认存放于localStorage
  permissionCacheType:  STORAGE_TYPE.LOCAL,
  // 项目主题色
  themeColor: primaryColor,
  // 网站灰色模式，用于可能悼念的日期开启
  grayMode: false,
  // 色弱模式
  colorWeak: false,
  // 是否取消菜单,顶部,多标签页显示, 用于可能内嵌在别的系统内
  fullContent: false,
  // 主题内容宽度
  contentMode: content.FULL,
  // 是否显示logo
  showLogo: true,
  // 是否显示底部信息 copyright
  showFooter: true,
  // 头部配置
  headerSetting: {
    // 背景色
    bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
    // 固定头部
    fixed: true,
    // 是否显示顶部
    show: true,
    // 主题
    theme: theme.LIGHT,
    // 显示全屏按钮
    showFullScreen: true,
    // 显示消息中心按钮
    showNotice: true,
  },
  // 菜单配置
  menuSetting: {
    // 背景色
    bgColor: SIDE_BAR_BG_COLOR_LIST[3],
    // 是否固定住菜单
    fixed: true,
    // 菜单折叠
    collapsed: false,
    // 折叠菜单时候是否显示菜单名
    collapsedShowTitle: false,
    // 是否可拖拽
    canDrag: true,
    // 是否显示
    show: true,
    // 菜单宽度
    menuWidth: 210,
    // 菜单模式
    mode: menuMode.INLINE,
    // 菜单类型
    type: MenuTypeEnum.SIDEBAR,
    // 菜单主题
    type: menuType.SIDEBAR,
    // 分割菜单
    split: false,
    // 顶部菜单布局
    topMenuAlign: 'center',
    // 折叠触发器的位置
    trigger: trigger.HEADER,
    // 手风琴模式，只展示一个菜单
    accordion: true,
    // 在路由切换的时候关闭左侧混合菜单展开菜单
    closeMixSidebarOnChange: false,
    // 左侧混合菜单模块切换触发方式
    mixSideTrigger: mixSidebarTrigger.CLICK,
    // 是否固定左侧混合菜单
    mixSideFixed: false,
  },
  // 多标签
  multiTabsSetting: {
    // 刷新后是否保留已经打开的标签页
    cache: false,
    // 开启
    show: true,
    // 开启快速操作
    showQuick: true,
    // 是否可以拖拽
    canDrag: true,
    // 是否显示刷新按钮
    showRedo: true,
  },


  // 动画配置
  transitionSetting: {
    //  是否开启切换动画
    enable: true,
    // 动画名
    basicTransition: routerTransition.FADE_SIDE,
    // 是否打开页面切换loading
    openPageLoading: true,
    // 是否打开页面切换顶部进度条
    openNProgress: false,
  },


  // 是否开启KeepAlive缓存  开发时候最好关闭,不然每次都需要清除缓存
  openKeepAlive: true,
  // 自动锁屏时间，为0不锁屏。 单位分钟 默认1个小时
  lockTime: 0,
  // 显示面包屑
  showBreadCrumb: true,
  // 是否开启回到顶部
  useOpenBackTop: true,
  //  是否可以嵌入iframe页面
  canEmbedIFramePage: true,
  // 切换界面的时候是否删除未关闭的message及notify
  closeMessageOnSwitch: true,
  // 切换界面的时候是否取消已经发送但是未响应的http请求。
  // 如果开启,想对单独接口覆盖。可以在单独接口设置
  removeAllHttpPending: true,
};

缓存配置

用于配置缓存内容加密信息，对缓存到浏览器的信息进行 AES 加密

在 /@/settings/cache.setting.js 内可以配置 localStorage 及 sessionStorage 缓存信息

前提: 使用项目自带的缓存工具类 /@/utils/cache 来进行缓存操作

// 缓存默认过期时间
export const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;

多语言配置

用于配置多语言信息

在 src/settings/locale.setting.js 内配置

export const LOCALE = {
  ZH_CN: 'zh-CN',
  EN_US: 'en',
}


export const currentLocale = () => {
  const _locale = navigator.language || navigator.userLanguage
  if (Object.values(LOCALE).includes(_locale)) return _locale
  return LOCALE.ZH_CN
}


export const currentLocale = () => {
  // 是否显示语言选择器
  showPicker: true,
  // 当前语言
  locale: currentLocale(),
  // 默认语言
  fallback: currentLocale(),
  // 允许的语言
  availableLocales: [LOCALE.ZH_CN, LOCALE.EN_US],
};


// 语言列表
export const localeList = [
  {
    text: '简体中文',
    event: LOCALE.ZH_CN,
  },
  {
    text: 'English',
    event: LOCALE.EN_US,
  },
]

主题色配置

默认全局主题色配置位于 build/config/themeConfig.ts 内

只需要修改 primaryColor 为您需要的配色，然后重新执行 pnpm serve 即可

/**
 * less global variable
 */
export const primaryColor = '#3A78F2';

样式配置

css 前缀设置

用于修改项目内组件 class 的统一前缀

export const prefixCls = import.meta.env.VITE_GLOB_BRAND
@namespace: apms;

前缀使用

在 css 内

<style lang="less" scoped>
  /* namespace已经全局注入，不需要额外再引入 */
  @prefix-cls: ~'@{namespace}-app-logo';


  .@{prefix-cls} {
    width: 100%;
  }
</style>

在 vue/ts 内

import { useDesign } from '/@/hooks/web/useDesign';


const { prefixCls } = useDesign('app-logo');


// prefixCls => vben-app-logo

颜色配置

用于预设一些颜色数组

在 src/settings/design.setting.js 内配置

//  app主题色预设
export const APP_PRESET_COLOR_LIST = [
  '#0960bd',
  '#0084f4',
  '#009688',
  '#536dfe',
  '#ff5c93',
  '#ee4f12',
  '#0096c7',
  '#9c27b0',
  '#ff9800',
]


// 顶部背景色预设
export const HEADER_PRESET_BG_COLOR_LIST = [
  '#ffffff',
  '#151515',
  '#009688',
  '#5172DC',
  '#018ffb',
  '#409eff',
  '#e74c3c',
  '#24292e',
  '#394664',
  '#001529',
  '#383f45',
]


// 左侧菜单背景色预设
export const SIDE_BAR_BG_COLOR_LIST = [
  '#001529',
  '#212121',
  '#273352',
  '#ffffff',
  '#191b24',
  '#191a23',
  '#304156',
  '#001628',
  '#28333E',
  '#344058',
  '#383f45',
]