autoAiWorkSys/admin/config

Admin 前端配置说明

📁 配置文件结构

admin/
├── config/
│   ├── index.js          # 主配置文件（支持多环境）
│   └── README.md         # 配置说明文档（本文件）
├── env.development       # 开发环境变量
├── env.test             # 测试环境变量
└── env.production       # 生产环境变量

---

⚙️ 配置项说明

基础配置

配置项	类型	默认值	说明
title	String	'Tennis管理系统'	系统标题
apiUrl	String	-	后端 API 地址
uploadUrl	String	-	文件上传地址
showSettings	Boolean	true	是否显示设置按钮
showTagsView	Boolean	true	是否显示标签栏
fixedHeader	Boolean	true	是否固定头部
sidebarLogo	Boolean	true	是否显示侧边栏 Logo
cookieExpires	Number	1	Token 在 Cookie 中存储的天数
themeColor	String	'#2d8cf0'	系统主题色
debug	Boolean	false	是否开启调试模式

---

🌍 环境配置

开发环境（development）

{
  apiUrl: 'http://localhost:9098/admin_api/',
  uploadUrl: 'http://localhost:9098/admin_api/upload',
  debug: true  // 开发环境显示调试信息
}

启动命令：

npm run serve

测试环境（test）

{
  apiUrl: 'http://test.yourdomain.com/admin_api/',
  uploadUrl: 'http://test.yourdomain.com/admin_api/upload',
  debug: false
}

启动命令：

npm run build:test

生产环境（production）

{
  apiUrl: 'https://api.yourdomain.com/admin_api/',
  uploadUrl: 'https://api.yourdomain.com/admin_api/upload',
  debug: false
}

启动命令：

npm run build

---

🔧 使用方法

在组件中使用配置

框架已将配置挂载到 Vue.prototype.$config，可以在任何组件中使用：

<template>
  <div>
    <h1>{{ $config.title }}</h1>
    <p>API 地址: {{ $config.apiUrl }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('系统标题:', this.$config.title)
    console.log('API 地址:', this.$config.apiUrl)
    console.log('是否调试模式:', this.$config.debug)
  }
}
</script>

在 API 服务中使用配置

HTTP 工具已自动使用 apiUrl 作为基础路径：

// 无需手动拼接 apiUrl，框架会自动处理
this.$http.get('/user/list')  
// 实际请求: http://localhost:9098/admin_api/user/list

---

📝 修改配置

修改基础配置

编辑 config/index.js 中的 baseConfig：

const baseConfig = {
  title: '你的系统名称',  // 修改系统标题
  themeColor: '#409EFF',  // 修改主题色
  // ... 其他配置
}

修改环境配置

编辑对应环境的配置对象：

// 开发环境配置
const developmentConfig = {
  ...baseConfig,
  apiUrl: 'http://localhost:9098/admin_api/',  // 修改开发环境 API 地址
  uploadUrl: 'http://localhost:9098/admin_api/upload',
  debug: true
}

// 生产环境配置
const productionConfig = {
  ...baseConfig,
  apiUrl: 'https://api.yourdomain.com/admin_api/',  // 修改生产环境 API 地址
  uploadUrl: 'https://api.yourdomain.com/admin_api/upload',
  debug: false
}

添加自定义配置

可以在任何环境配置中添加自定义字段：

const developmentConfig = {
  ...baseConfig,
  apiUrl: 'http://localhost:9098/admin_api/',
  uploadUrl: 'http://localhost:9098/admin_api/upload',
  
  // 自定义配置
  enableMock: true,
  websocketUrl: 'ws://localhost:9099',
  maxFileSize: 10 * 1024 * 1024,  // 10MB
  allowedFileTypes: ['image/jpeg', 'image/png', 'application/pdf']
}

然后在组件中使用：

if (this.$config.enableMock) {
  console.log('启用 Mock 数据')
}

const ws = new WebSocket(this.$config.websocketUrl)

---

🚀 部署说明

开发环境部署

# 启动开发服务器
npm run serve

# 或使用 yarn
yarn serve

测试环境部署

# 构建测试环境代码
npm run build:test

# 将 dist 目录部署到测试服务器

生产环境部署

# 构建生产环境代码
npm run build

# 将 dist 目录部署到生产服务器

---

⚠️ 注意事项

1. 不要将敏感信息写入配置文件

   • API 密钥、数据库密码等敏感信息应通过环境变量传递
   • 使用 process.env.VUE_APP_* 格式定义环境变量

2. 修改配置后需要重启

   • 修改配置文件后，需要重启开发服务器才能生效
   • Ctrl + C 停止服务器，然后重新运行 npm run serve

3. 生产环境配置检查

   • 部署前务必检查生产环境的 apiUrl 是否正确
   • 确保关闭 debug 模式

4. 跨域问题

   • 开发环境如遇到跨域问题，可以在 vue.config.js 中配置代理
   • 生产环境需要后端配置 CORS

---

📚 相关文档

• Vue CLI 环境变量和模式
• AdminFramework 完整文档

---

最后更新: 2025-10-10