249 lines
5.1 KiB
Markdown
249 lines
5.1 KiB
Markdown
# 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）
|
||
|
||
```javascript
|
||
{
|
||
apiUrl: 'http://localhost:9098/admin_api/',
|
||
uploadUrl: 'http://localhost:9098/admin_api/upload',
|
||
debug: true // 开发环境显示调试信息
|
||
}
|
||
```
|
||
|
||
**启动命令**：
|
||
```bash
|
||
npm run serve
|
||
```
|
||
|
||
### 测试环境（test）
|
||
|
||
```javascript
|
||
{
|
||
apiUrl: 'http://test.yourdomain.com/admin_api/',
|
||
uploadUrl: 'http://test.yourdomain.com/admin_api/upload',
|
||
debug: false
|
||
}
|
||
```
|
||
|
||
**启动命令**：
|
||
```bash
|
||
npm run build:test
|
||
```
|
||
|
||
### 生产环境（production）
|
||
|
||
```javascript
|
||
{
|
||
apiUrl: 'https://api.yourdomain.com/admin_api/',
|
||
uploadUrl: 'https://api.yourdomain.com/admin_api/upload',
|
||
debug: false
|
||
}
|
||
```
|
||
|
||
**启动命令**：
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 使用方法
|
||
|
||
### 在组件中使用配置
|
||
|
||
框架已将配置挂载到 `Vue.prototype.$config`，可以在任何组件中使用：
|
||
|
||
```vue
|
||
<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` 作为基础路径：
|
||
|
||
```javascript
|
||
// 无需手动拼接 apiUrl，框架会自动处理
|
||
this.$http.get('/user/list')
|
||
// 实际请求: http://localhost:9098/admin_api/user/list
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 修改配置
|
||
|
||
### 修改基础配置
|
||
|
||
编辑 `config/index.js` 中的 `baseConfig`：
|
||
|
||
```javascript
|
||
const baseConfig = {
|
||
title: '你的系统名称', // 修改系统标题
|
||
themeColor: '#409EFF', // 修改主题色
|
||
// ... 其他配置
|
||
}
|
||
```
|
||
|
||
### 修改环境配置
|
||
|
||
编辑对应环境的配置对象：
|
||
|
||
```javascript
|
||
// 开发环境配置
|
||
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
|
||
}
|
||
```
|
||
|
||
### 添加自定义配置
|
||
|
||
可以在任何环境配置中添加自定义字段：
|
||
|
||
```javascript
|
||
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']
|
||
}
|
||
```
|
||
|
||
然后在组件中使用：
|
||
|
||
```javascript
|
||
if (this.$config.enableMock) {
|
||
console.log('启用 Mock 数据')
|
||
}
|
||
|
||
const ws = new WebSocket(this.$config.websocketUrl)
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 部署说明
|
||
|
||
### 开发环境部署
|
||
|
||
```bash
|
||
# 启动开发服务器
|
||
npm run serve
|
||
|
||
# 或使用 yarn
|
||
yarn serve
|
||
```
|
||
|
||
### 测试环境部署
|
||
|
||
```bash
|
||
# 构建测试环境代码
|
||
npm run build:test
|
||
|
||
# 将 dist 目录部署到测试服务器
|
||
```
|
||
|
||
### 生产环境部署
|
||
|
||
```bash
|
||
# 构建生产环境代码
|
||
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 环境变量和模式](https://cli.vuejs.org/zh/guide/mode-and-env.html)
|
||
- [AdminFramework 完整文档](../../_doc/admin_core完整使用文档.md)
|
||
|
||
---
|
||
|
||
**最后更新**: 2025-10-10
|
||
|