Skip to content

前端开发启动指南.md

Latest commit

 

History

History
115 lines (85 loc) · 2.67 KB

前端开发启动指南.md

File metadata and controls

115 lines (85 loc) · 2.67 KB
Raw

前端开发启动指南

📋 启动步骤

1️⃣ 启动后端服务 (必须先启动)

在项目根目录执行：

python web_app.py

✅ 成功标志： 看到以下日志表示后端启动成功

Server started at http://0.0.0.0:5000

2️⃣ 启动前端服务

进入前端目录：

cd frontend

Windows 用户：

start.bat

Linux/Mac 用户：

./start.sh

或手动启动：

npm install  # 首次运行需要安装依赖
npm run dev

✅ 成功标志： 看到以下信息表示前端启动成功

Local:   http://localhost:3000/
Network: http://192.168.x.x:3000/

3️⃣ 访问应用

在浏览器打开：http://localhost:3000

🔍 常见问题排查

Q: 前端页面空白或显示错误

A: 检查后端是否正常启动

Q: API请求失败 (Network Error)

A: 后端服务未启动或端口被占用

  • 确保后端运行在 5000 端口
  • 检查防火墙设置

Q: 登录页面无法登录

A: 检查后端配置

  • 确认 config/config.json 中的认证配置
  • 默认用户名密码在后端配置中

Q: 启动脚本无法执行

A: Linux/Mac 需要添加执行权限

chmod +x frontend/start.sh

🚀 开发环境信息

服务 地址 说明
后端 API http://localhost:5000 Flask 应用
前端开发服务器 http://localhost:3000 Vite 开发服务器
API 代理 /api → :5000/api 前端自动代理到后端

📝 开发流程

  1. 修改前端代码 → 热重载自动更新
  2. 修改后端代码 → 需手动重启 python web_app.py
  3. API 接口变更 → 重启后端即可，前端无需重启

⚙️ 端口配置

如需修改端口，请同时修改：

  • 前端：frontend/vite.config.ts 中的 server.port 和 proxy 配置
  • 后端：web_app.py 中的启动端口

🔧 调试建议

  1. 开启浏览器开发者工具

    • Console: 查看前端错误和日志
    • Network: 检查 API 请求状态
    • Vue DevTools: 查看组件状态

  2. 查看后端日志

    • 终端输出：实时日志
    • 日志文件：log/web_app_*.log

  3. 检查网络连接

    • 确保 localhost 解析正常
    • 检查防火墙和杀毒软件设置

💡 最佳实践

  • 🔄 定期保存代码：热重载可能不保存状态
  • 📱 测试响应式设计：调整浏览器窗口大小
  • 🐛 遇到问题先看控制台：90% 的问题都有错误提示
  • 📦 依赖更新后重启：修改 package.json 后重新运行脚本

Happy Coding! 🎉