# 前端地址配置说明

## ✅ 已完成的配置修改

### 1. **API 请求配置** (`study-ui/src/utils/request.js`)
- ✅ 修改为：开发环境使用 `/dev-api` 代理路径
- ✅ 生产环境使用 `http://localhost:8080`
- ✅ 支持环境变量配置

### 2. **开发服务器代理配置** (`study-ui/vue.config.js`)
- ✅ 后端接口代理：`/dev-api` → `http://localhost:8080`
- ✅ WebSocket 代理：`/ws` → `ws://localhost:8080`
- ✅ 后端地址：`http://localhost:8080`

### 3. **WebSocket 连接配置** (`study-ui/src/views/study/screenStream/index.vue`)
- ✅ 开发环境：使用 `window.location.host`（通过代理）
- ✅ 生产环境：直接使用 `localhost:8080`

### 4. **环境变量文件**
- ✅ 已创建 `.env.development`（开发环境）
- ✅ 已创建 `.env.production`（生产环境）

## 📋 配置详情

### 开发环境配置 (`.env.development`)
```env
ENV = 'development'
VUE_APP_BASE_API = '/dev-api'
VUE_APP_TITLE = '国语教育平台'
```

### 生产环境配置 (`.env.production`)
```env
ENV = 'production'
VUE_APP_BASE_API = 'http://localhost:8080'
VUE_APP_TITLE = '国语教育平台'
```

## 🔄 请求流程

### 开发环境
1. **API 请求**：
   - 前端发送：`/dev-api/login`
   - 代理转发：`http://localhost:8080/login`
   - 后端处理并返回

2. **WebSocket 连接**：
   - 前端连接：`ws://localhost:20002/ws/screenStream/{userId}`
   - 代理转发：`ws://localhost:8080/ws/screenStream/{userId}`
   - 后端处理

### 生产环境
1. **API 请求**：
   - 前端直接发送：`http://localhost:8080/login`

2. **WebSocket 连接**：
   - 前端直接连接：`ws://localhost:8080/ws/screenStream/{userId}`

## 🚀 使用步骤

### 1. 确保后端服务运行
```bash
# 后端服务应该运行在 http://localhost:8080
# 检查方法：访问 http://localhost:8080/swagger-ui/index.html
```

### 2. 启动前端开发服务器
```bash
cd study-ui
npm run dev
```

### 3. 访问前端
- 开发环境：`http://localhost:20002`（或控制台显示的地址）
- 登录测试：用户名 `admin`，密码 `admin123`

## 🔍 故障排查

### 问题1：API 请求失败（404 或连接错误）
**检查项：**
1. ✅ 后端服务是否运行在 `localhost:8080`
2. ✅ 浏览器控制台查看实际请求 URL
3. ✅ 检查 `.env.development` 文件是否存在
4. ✅ 重启前端开发服务器

### 问题2：WebSocket 连接失败
**检查项：**
1. ✅ 后端 WebSocket 服务是否正常
2. ✅ 浏览器控制台查看 WebSocket 连接 URL
3. ✅ 检查 `vue.config.js` 中的 `/ws` 代理配置
4. ✅ 确认后端端口为 8080

### 问题3：跨域问题
**解决方案：**
- 开发环境已配置代理，应该不会有跨域问题
- 如果仍有问题，检查 `vue.config.js` 中的 `changeOrigin: true`

## 📝 注意事项

1. **环境变量优先级**：
   - 环境变量文件中的配置 > 代码中的默认值
   - 修改环境变量后需要重启前端服务

2. **端口配置**：
   - 前端开发服务器端口：`20002`（可在 `vue.config.js` 中修改）
   - 后端服务端口：`8080`（必须与后端实际端口一致）

3. **WebSocket 代理**：
   - 开发环境通过代理连接，生产环境直接连接
   - 确保 `vue.config.js` 中配置了 `/ws` 代理

## ✅ 验证配置

### 验证步骤：
1. 打开浏览器开发者工具（F12）
2. 查看 Network 标签
3. 发起一个 API 请求（如登录）
4. 检查请求 URL：
   - 开发环境应该是：`http://localhost:20002/dev-api/login`
   - 实际转发到：`http://localhost:8080/login`

5. 查看 Console 标签：
   - 应该看到：`[Request] BaseURL configured: /dev-api`

## 🎯 总结

所有配置已修改为使用本地 8080 端口：
- ✅ API 请求通过 `/dev-api` 代理到 `http://localhost:8080`
- ✅ WebSocket 通过 `/ws` 代理到 `ws://localhost:8080`
- ✅ 环境变量文件已创建
- ✅ 开发和生产环境都已配置

**如果仍有问题，请检查：**
1. 后端服务是否正常运行
2. 端口是否正确（8080）
3. 防火墙是否阻止连接
4. 浏览器控制台的错误信息