flask如何运行react
运行React与Flask结合的方案
将React与Flask结合运行通常有两种主流方式：前后端分离或模板集成。以下是具体实现方法：
前后端分离模式
开发阶段
- React项目通过
create-react-app或Vite搭建，运行在独立端口（如3000）。 - Flask作为后端API服务运行在另一端口（如5000），通过
flask-cors处理跨域请求：from flask_cors import CORS app = Flask(__name__) CORS(app)
生产部署
-
构建React项目生成静态文件：
npm run build -
配置Flask托管静态文件：
from flask import send_from_directory @app.route('/', defaults={'path': ''}) @app.route('/<path:path>') def serve(path): if path != "" and os.path.exists(os.path.join('react-build', path)): return send_from_directory('react-build', path) else: return send_from_directory('react-build', 'index.html')
模板集成模式
构建React为静态资源
- 修改React项目的
package.json，设置"homepage": "/static"。 - 构建后复制
build文件夹到Flask的static目录。
Flask模板渲染
- 使用Jinja2模板引入React资源：
<!-- templates/index.html --> <!DOCTYPE html> <html> <head> <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet"> </head> <body> <div id="root"></div> <script src="{{ url_for('static', filename='js/main.js') }}"></script> </body> </html>
关键配置要点
API通信规范
- React使用
axios或fetch调用Flask接口：fetch('/api/data') .then(response => response.json()) .then(data => console.log(data));
Flask路由示例
@app.route('/api/data')
def get_data():
return jsonify({"message": "Hello from Flask!"})环境变量管理
- React通过
.env文件设置代理：REACT_APP_API_URL=http://localhost:5000 - Flask可通过
python-dotenv加载配置。
部署优化建议
- 使用Nginx反向代理统一端口
- 启用Flask的
gzip压缩 - React配置路由兼容（如
react-router-dom的HashRouter） - 生产环境禁用Flask的调试模式
两种方式各有优势：分离模式更适合复杂应用，模板集成适合快速原型开发。根据项目规模选择合适方案。
