139 lines
4.1 KiB
Markdown
139 lines
4.1 KiB
Markdown
# 前端地址配置说明
|
||
|
||
## ✅ 已完成的配置修改
|
||
|
||
### 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. 浏览器控制台的错误信息
|
||
|