# 环境变量配置说明

## 问题
登录时出现404错误，原因是缺少环境变量 `VUE_APP_BASE_API`。

## 解决方案

### 方案1：手动创建环境变量文件（推荐）

在 `study-ui` 目录下创建以下文件：

#### 1. 创建 `.env.development` 文件（开发环境）
```env
# 开发环境配置
ENV = 'development'

# 国语教育平台/开发环境
VUE_APP_BASE_API = '/dev-api'

# 开发环境标题
VUE_APP_TITLE = 国语教育平台
```

#### 2. 创建 `.env.production` 文件（生产环境）
```env
# 生产环境配置
ENV = 'production'

# 国语教育平台/生产环境
VUE_APP_BASE_API = '/api'

# 生产环境标题
VUE_APP_TITLE = 国语教育平台
```

### 方案2：使用默认值（已修复）

代码中已经设置了默认值 `/api`，如果环境变量未定义，会自动使用默认值。

## 使用步骤

1. **创建环境变量文件**（如果使用方案1）
   - 在 `study-ui` 目录下创建 `.env.development` 文件
   - 复制上面的内容到文件中

2. **重启前端服务**
   ```bash
   # 停止当前服务（Ctrl+C）
   cd Study-Vue-redis/study-ui
   npm run dev
   ```

3. **确认后端服务已启动**
- 后端服务应该运行在 `http://localhost:30091`
   - 如果端口不同，需要修改 `vue.config.js` 中的 `baseUrl`

4. **测试登录**
   - 打开 `http://localhost:80` 或 `http://localhost:5173`
   - 输入用户名：`admin`
   - 输入密码：`abc123`
   - 输入验证码
   - 点击登录

## 验证

登录请求的完整流程：
1. 前端发送：`POST /api/login`
2. 代理转发：`POST http://localhost:30091/login`
3. 后端处理并返回token

如果仍然出现404，请检查：
- 后端服务是否启动（访问 `http://localhost:30091/swagger-ui/index.html` 测试）
- 后端端口是否为8080（如果不是，修改 `vue.config.js` 中的 `baseUrl`）
- 浏览器控制台Network标签，查看实际请求的URL