如何修改 vue3-element-admin 全局字体大小从尺寸切换到深度定制的 3 步指南【免费下载链接】vue3-element-admin基于 Vue 3 Vite 7 TypeScript element-plus 构建的后台管理前端模板配套后端源码vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin用 vue3-element-admin 搭建后台后最常见的反馈之一就是“整页字体偏小、控件偏矮长时间盯着累”。好消息是模板里字体与控件大小由三处配置控制运行时可切换的组件尺寸、面向首次访问者的默认值以及 Element Plus 的 CSS 变量。下面按“改哪里 → 怎么改 → 看到什么效果”的顺序说明改完你能得到一套团队统一的舒适字号。前置条件适用版本与涉及文件项目版本 v4.9.0Vue 3.5 Element Plus 2.14 Vite 8包管理器为 pnpm本文涉及 5 个文件均无需新增依赖src/settings.ts、src/stores/app.ts、src/styles/element-plus-overrides.scss、src/styles/reset.scss、src/components/SizeSelect/index.vue第 1 步运行时切换组件尺寸不改任何代码登录进入任意页面点击顶栏右侧的“布局大小”图标位于搜索框与语言切换之间下拉菜单提供默认 / 大型 / 小型三个选项。选择后整页的输入框高度、按钮、表格行高都会随之变化且刷新不丢失。它的工作链路是SizeSelect 组件 触发change调用appStore.changeSize(size)src/stores/app.ts 中该值通过useStorage持久化// src/stores/app.ts const size useStorage(STORAGE_KEYS.SIZE, defaults.size); // 键名 vea:app:size存在 localStoragesrc/App.vue 把它交给el-config-provider :sizesizeElement Plus 按尺寸档切换内部字号与控件高度 这一档适合个人偏好每个人各自调互不影响。第 2 步修改项目默认尺寸决定首次访问者的观感运行时切换只对当前浏览器生效。要让每个新访问的用户第一次进来就是大号字体改defaults.size// src/settings.ts export const defaults { // ... size: ComponentSize.LARGE, // 把 default 改为 large或 SMALL } as const;ComponentSize定义在 src/enums/settings.ts取值为default/large/small。重启pnpm dev后没有历史记录的浏览器会以新值渲染。⚠️ 注意改默认值不会影响已打开过系统的人因为他们的localStorage里已有缓存值见第 4 节排查。第 3 步用 CSS 变量定制基础字号与控件高度三档尺寸是“预设”如果你要的是 15px 这种精确值就在 Element Plus 的运行时覆盖文件里加 CSS 变量。项目已在此文件的:root中按同样方式覆盖了圆角、控件高度等变量// src/styles/element-plus-overrides.scss :root { /* 已有 --el-component-size 等变量追加或修改以下项 */ --el-font-size-base: 15px; // 默认尺寸组件的基础字号Element Plus 默认 14px --el-font-size-small: 13px; // 小型组件字号 --el-font-size-large: 18px; // 大型组件字号 --el-component-size: 36px; // 输入框、按钮等控件高度 --el-component-size-small: 30px; --el-component-size-large: 42px; }保存后 Vite 热更新整页字体与控件高度同步放大。若只调整字号不想动高度删掉--el-component-size-*三行即可。第 4 步可选更换全局字体栈想换字体家族例如引入品牌字体改body的font-family// src/styles/reset.scss body { font-family: HarmonyOS Sans SC, Inter, system-ui, PingFang SC, Microsoft YaHei, sans-serif; }把自定义字体名放在最前后面保留系统字体兜底避免加载失败时出现突兀的字体切换。关键参数一览参数所在位置作用建议值sizesrc/settings.ts 的defaults.size首次访问者的组件尺寸档位default团队普遍反馈字小用large--el-font-size-baseelement-plus-overrides.scss 的:root默认尺寸组件的基础字号1415px--el-font-size-small/--el-font-size-large同上小型 / 大型尺寸组件的字号与 base 保持 23px 梯度--el-component-size含 small / large 三档同上输入框、按钮等控件高度项目现值 28 / 34 / 38px等比缩放font-familyreset.scss 的body全局字体栈品牌字体在前系统字体兜底vea:app:sizelocalStorage运行时尺寸切换的持久化键无需修改用于排查缓存问题验证改动是否生效执行pnpm dev启动项目并登录点击顶栏“布局大小”图标切换到大型观察输入框变高、表格文字变大再刷新一次页面确认样式保持打开 DevTools 控制台执行// 期望返回 15px即你设置的 --el-font-size-base 值 getComputedStyle(document.querySelector(.el-button)).fontSize;在 DevTools 的 Application → Local Storage 中确认存在vea:app:size其值为你最后选择的档位高频问题排查现象改了defaults.size页面没有任何变化。原因当前浏览器localStorage已有vea:app:sizeuseStorage优先读存储值而非默认值。处理在 DevTools 中删除该键后刷新新默认值只对首次访问生效。现象调大了--el-font-size-base但small尺寸的组件没变。原因小型 / 大型组件分别读取--el-font-size-small/--el-font-size-large与 base 变量互不相通。处理把对应的--el-font-size-small、--el-font-size-large按梯度一并调整。现象全局字号变了侧边栏菜单图标大小却没变。原因src/styles/layout.scss 中菜单图标固定为18px带!important属于刻意设计。处理确有需要时修改layout.scss中.layout-menu-icon相关行。现象在页面里直接写body { font-size: 16px }Element Plus 组件毫无反应。原因EP 组件内部字号来自--el-font-size-*变量不受body字号级联影响。处理组件层面一律走第 3 步的 CSS 变量方案。写在最后vue3-element-admin 的字体与控件大小由“运行时尺寸切换 默认值 CSS 变量”三层控制按需选用其中一层即可不必三处全改。下一步可以顺带研究 src/utils/theme.ts 的主题色变量注入机制把字号定制和自定义主题色一起做成团队统一规范。【免费下载链接】vue3-element-admin基于 Vue 3 Vite 7 TypeScript element-plus 构建的后台管理前端模板配套后端源码vue-element-admin 的 vue3 版本。项目地址: https://gitcode.com/GitHub_Trending/vue3/vue3-element-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考