import{o as n,c as s,a}from"./app.51e46c58.js";const e='{"title":"项目配置项","description":"","frontmatter":{},"headers":[{"level":2,"title":"环境变量配置","slug":"环境变量配置"},{"level":3,"title":"配置项说明","slug":"配置项说明"},{"level":3,"title":".env.base","slug":"env-base"},{"level":3,"title":".env.dev","slug":"env-dev"},{"level":3,"title":".env.test","slug":"env-test"},{"level":3,"title":".env.pro","slug":"env-pro"},{"level":2,"title":"项目及主题配置","slug":"项目及主题配置"},{"level":3,"title":"配置文件路径","slug":"配置文件路径"},{"level":3,"title":"说明","slug":"说明"},{"level":3,"title":"如何添加新属性","slug":"如何添加新属性"},{"level":2,"title":"多语言配置","slug":"多语言配置"},{"level":2,"title":"样式配置","slug":"样式配置"},{"level":3,"title":"css 前缀设置","slug":"css-前缀设置"},{"level":3,"title":"前缀使用","slug":"前缀使用"}],"relativePath":"guide/settings.md","lastUpdated":1721205967753}',p={},t=a('

项目配置项

本文将介绍一些常用的项目配置，方便开发者可以根据需求进行定制化改造。

环境变量配置

项目的环境变量配置位于项目根目录下的，这里主要配置四个个环境变量，分别为：

在开发调试的时候，会读取 .env.base 里面的数据。其他环境亦是如此，根据打包命令的不同，来读取不同的环境变量。

也许你会疑惑，为什么会有多个环境变量？

以 生产环境 为例，当我们执行 pnpm run build:pro 时，输出的包是用于线上环境的，所以代码都应该是压缩，我们需要删除掉代码中的 console.log 和 degubber，保证打包后代码的整洁度和不可见性。而其他环境，所以应该保留 console.log 和 degubber 用于调试，这样才能快速定位到问题所在。

所以环境变量的作用就是为了，在不同环境下有不同的表现。

提示

console.log(import.meta.env.VITE_APP_TITLE)\n

配置项说明

.env.base

本地开发环境适用

# 环境\nNODE_ENV = development\n\n# 接口前缀\nVITE_API_BASEPATH = base\n\n# 打包路径\nVITE_BASE_PATH = /\n\n# 标题\nVITE_APP_TITLE = ElementAdmin\n

.env.dev

开发环境适用

# 环境\nNODE_ENV = production\n\n# 接口前缀\nVITE_API_BASEPATH = dev\n\n# 打包路径\nVITE_BASE_PATH = /dist-dev/\n\n# 是否删除debugger\nVITE_DROP_DEBUGGER = false\n\n# 是否删除console.log\nVITE_DROP_CONSOLE = false\n\n# 是否sourcemap\nVITE_SOURCEMAP = true\n\n# 输出路径\nVITE_OUT_DIR = dist-dev\n\n# 标题\nVITE_APP_TITLE = ElementAdmin\n\n

.env.test

测试环境适用

# 环境\nNODE_ENV = production\n\n# 接口前缀\nVITE_API_BASEPATH = test\n\n# 打包路径\nVITE_BASE_PATH = /dist-test/\n\n# 是否删除debugger\nVITE_DROP_DEBUGGER = false\n\n# 是否删除console.log\nVITE_DROP_CONSOLE = false\n\n# 是否sourcemap\nVITE_SOURCEMAP = true\n\n# 输出路径\nVITE_OUT_DIR = dist-test\n\n

.env.pro

生产环境适用

# 环境\nNODE_ENV = production\n\n# 接口前缀\nVITE_API_BASEPATH = pro\n\n# 打包路径\nVITE_BASE_PATH = /\n\n# 是否删除debugger\nVITE_DROP_DEBUGGER = true\n\n# 是否删除console.log\nVITE_DROP_CONSOLE = true\n\n# 是否sourcemap\nVITE_SOURCEMAP = false\n\n# 输出路径\nVITE_OUT_DIR = dist-pro\n\n# 标题\nVITE_APP_TITLE = ElementAdmin\n\n

项目及主题配置

提示

项目配置文件用于配置项目内展示的内容、布局、主题色等效果。

配置文件路径

src/store/modules/app.ts

说明

修改完之后，会添加到全局的状态管理中，方便其他地方使用。

export const appModules: AppState = {\n  sizeMap: ['default', 'large', 'small'],\n  mobile: false, // 是否是移动端\n  title: import.meta.env.VITE_APP_TITLE as string, // 标题\n  pageLoading: false, // 路由跳转loading\n\n  breadcrumb: true, // 面包屑\n  breadcrumbIcon: true, // 面包屑图标\n  collapse: false, // 折叠菜单\n  hamburger: true, // 折叠图标\n  screenfull: true, // 全屏图标\n  size: true, // 尺寸图标\n  locale: true, // 多语言图标\n  tagsView: true, // 标签页\n  logo: true, // logo\n  fixedHeader: true, // 固定toolheader\n  footer: true, // 显示页脚\n  greyMode: false, // 是否开始灰色模式，用于特殊悼念日\n\n  layout: wsCache.get('layout') || 'classic', // layout布局\n  isDark: wsCache.get('isDark') || false, // 是否是暗黑模式\n  currentSize: wsCache.get('default') || 'default', // 组件尺寸\n  theme: wsCache.get('theme') || {\n    // 主题色\n    elColorPrimary: '#409eff',\n    // 左侧菜单边框颜色\n    leftMenuBorderColor: 'inherit',\n    // 左侧菜单背景颜色\n    leftMenuBgColor: '#001529',\n    // 左侧菜单浅色背景颜色\n    leftMenuBgLightColor: '#0f2438',\n    // 左侧菜单选中背景颜色\n    leftMenuBgActiveColor: 'var(--el-color-primary)',\n    // 左侧菜单收起选中背景颜色\n    leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',\n    // 左侧菜单字体颜色\n    leftMenuTextColor: '#bfcbd9',\n    // 左侧菜单选中字体颜色\n    leftMenuTextActiveColor: '#fff',\n    // logo字体颜色\n    logoTitleTextColor: '#fff',\n    // logo边框颜色\n    logoBorderColor: 'inherit',\n    // 头部背景颜色\n    topHeaderBgColor: '#fff',\n    // 头部字体颜色\n    topHeaderTextColor: 'inherit',\n    // 头部悬停颜色\n    topHeaderHoverColor: '#f6f6f6',\n    // 头部边框颜色\n    topToolBorderColor: '#eee'\n  }\n}\n

如何添加新属性

如果想要添加新的全局配置属性，需要在 src/store/modules/app.ts 中 AppState 添加对应的类型，并在 appModules 对象中，赋予新属性的默认值。

多语言配置

用于配置多语言信息

在 src/store/modules/locale.ts 内配置

import { useCache } from '@/hooks/web/useCache'\nimport zhCn from 'element-plus/lib/locale/lang/zh-cn'\nimport en from 'element-plus/lib/locale/lang/en'\n\nconst { wsCache } = useCache()\n\nexport const elLocaleMap = {\n  'zh-CN': zhCn,\n  en: en\n}\nexport interface LocaleState {\n  currentLocale: LocaleDropdownType\n  localeMap: LocaleDropdownType[]\n}\n\nexport const localeModules: LocaleState = {\n  currentLocale: {\n    lang: wsCache.get('lang') || 'zh-CN',\n    elLocale: elLocaleMap[wsCache.get('lang') || 'zh-CN']\n  },\n  // 多语言\n  localeMap: [\n    {\n      lang: 'zh-CN',\n      name: '简体中文'\n    },\n    {\n      lang: 'en',\n      name: 'English'\n    }\n  ]\n}\n\n

样式配置

css 前缀设置

用于修改项目内组件及 element-plus 组件的 class 前缀。

由于 element-plus 的组件还没有全部采用动态配置前缀，所以目前还是使用 el 前缀。

// 命名空间\n@namespace: v;\n// el命名空间\n@elNamespace: el;\n\n// 导出变量\n:export {\n  namespace: @namespace;\n  elNamespace: @elNamespace;\n}\n\n

前缀使用

在 css 内

<style lang="less" scoped>\n  /* namespace已经全局注入，不需要额外在引入 */\n  @prefix-cls: ~'@{namespace}-app';\n\n  .@{prefix-cls} {\n    width: 100%;\n  }\n</style>\n

在 vue/ts 内

import { useDesign } from '/@/hooks/web/useDesign'\n\nconst { prefixCls } = useDesign('app')\n\n// prefixCls => v-app\n
',47);p.render=function(a,e,p,o,c,l){return n(),s("div",null,[t])};export default p;export{e as __pageData};