guoyu/_已清理文件备份_周六 22512/md/前端地址配置说明.md

前端地址配置说明

✅ 已完成的配置修改

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 = 'development'
VUE_APP_BASE_API = '/dev-api'
VUE_APP_TITLE = '国语教育平台'

生产环境配置 (.env.production)

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. 确保后端服务运行

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

2. 启动前端开发服务器

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. 浏览器控制台的错误信息