系统设置

配置分两层：src/settings.ts 控制功能开关与默认偏好，.env 文件控制环境变量与接口代理。主题、布局、组件尺寸等偏好通过设置面板或 CSS 变量配置。

功能开关

src/settings.ts 中 appConfig 控制应用级开关：

import { appConfig } from "@/settings";

appConfig.name              // 应用名称
appConfig.version           // 版本
appConfig.title             // 应用标题
appConfig.tenantEnabled     // 多租户开关

在代码中读取开关：

import { appConfig } from "@/settings";

if (appConfig.tenantEnabled) {
  // 多租户相关逻辑
}

环境变量

.env.development（开发）：

VITE_APP_PORT=3000                       # 应用端口
VITE_APP_TITLE=vue3-element-admin        # 项目名称
VITE_APP_BASE_API=/dev-api               # 代理前缀
VITE_APP_API_URL=https://api.youlai.tech # 接口地址
VITE_MOCK_DEV_SERVER=false               # 是否开启 Mock
VITE_APP_TENANT_ENABLED=false            # 是否开启多租户

.env.production（生产）：

VITE_APP_BASE_API=/prod-api              # 代理前缀，由 Nginx 转发
VITE_APP_TITLE=vue3-element-admin
VITE_APP_TENANT_ENABLED=false            # 是否开启多租户

变量	说明	默认值	适用环境
VITE_APP_PORT	应用端口	3000	开发
VITE_APP_TITLE	项目名称	—	全部
VITE_APP_BASE_API	API 代理前缀	/dev-api / /prod-api	全部
VITE_APP_API_URL	API 接口地址	—	仅开发
VITE_MOCK_DEV_SERVER	是否开启 Mock	false	仅开发
VITE_APP_TENANT_ENABLED	是否开启多租户	false	全部

环境变量注意

只有 VITE_ 前缀的变量会暴露给客户端；值始终是字符串，布尔判断用 === "true"；修改 .env 后需重启开发服务器。

接口代理

开发环境由 Vite 代理转发，vite.config.ts 中按 VITE_APP_BASE_API 匹配：

proxy: {
  [env.VITE_APP_BASE_API]: {
    target: env.VITE_APP_API_URL,
    changeOrigin: true,
    rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), ""),
  },
}

请求流向：/dev-api/user/info → Vite 代理 → https://api.youlai.tech/user/info。生产环境由 Nginx 代理，详见项目部署。

暗黑模式

点击导航栏的暗黑模式开关即可切换。

<script setup lang="ts">
import { useDark } from "@vueuse/core";

const isDark = useDark();
</script>

<template>
  <el-switch v-model="isDark" />
</template>

主题色

在设置面板中选择主题色，主题色通过 CSS 变量注入：

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
}

布局

在设置面板中切换布局模式，src/settings.ts 的 defaults.layout 控制默认值：

interface LayoutSettings {
  layout: "left" | "top" | "mix";  // 左侧 / 顶部 / 混合
  fixedHeader: boolean;            // 固定头部
  tagsView: boolean;               // 显示标签页
  sidebarLogo: boolean;            // 侧边栏 Logo
}

组件尺寸

在导航栏切换全局组件尺寸，可选 large / default / small。