切换至仅Flask后端后，create-react-app应用修改不生效问题咨询

嘿，这个问题我之前踩过坑！核心原因很直白：你现在只靠Flask Serve静态文件，但没保留React代码的自动编译机制——之前用npm start时，create-react-app会盯着你的src/文件夹，一有修改就实时重新打包，还能通知浏览器热重载；但切换到单Flask服务器后，你大概率只是把之前打包好的build/文件夹扔给Flask Serve，没有触发重新编译的流程，所以改App组件这些文件后，Flask给浏览器的还是旧的打包产物，自然看不到变化。

下面给你两个实用方案，分开发和生产环境：

开发环境（需要实时预览修改） #

方案1：用watch脚本自动触发React打包（简单易上手） #

这个方案不用折腾复杂配置，适合不想碰webpack的人：

1. 先确认你的项目结构大概是这样（可根据实际调整）：

   项目根目录/
   ├── app.py（Flask后端）
   └── client/（原create-react-app项目）
       ├── src/
       ├── package.json
       └── build/（打包后的静态文件）
   

2. 在React的client/package.json里添加watch脚本：
   先安装watch工具：

   cd client
   npm install --save-dev watch
   

   然后在scripts块里加一行：

   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "watch": "watch 'npm run build' src/"
   }
   

   这个脚本会监听src/文件夹的所有变化，一旦你修改React组件，就自动触发npm run build重新打包到build/目录。
3. 修改Flask的app.py，让它指向React的build/文件夹作为静态目录：

   from flask import Flask
   
   app = Flask(__name__, 
               static_folder='client/build', 
               static_url_path='/')
   
   # 处理SPA路由问题，所有非API请求都返回index.html
   @app.route('/', defaults={'path': ''})
   @app.route('/<path:path>')
   def catch_all(path):
       return app.send_static_file('index.html')
   
   if __name__ == '__main__':
       app.run(debug=True)
   

4. 启动方式：
   开一个终端运行watch脚本：

   cd client && npm run watch
   

   再开一个终端运行Flask：

   python app.py
   

   （嫌开两个终端麻烦？可以用concurrently工具同时启动两个进程，安装后在根目录加个脚本就行）

方案2：集成webpack热重载到Flask（更流畅的开发体验） #

这个方案能让Flask直接处理React的热重载，不用单独开watch进程，但需要稍微调整webpack配置：

1. 先安装依赖：

   cd client
   npm install --save-dev webpack-dev-middleware webpack-hot-middleware react-app-rewired customize-cra
   

2. 在client目录下创建config-overrides.js，修改webpack配置：

   const { override, addWebpackPlugin } = require('customize-cra');
   const webpack = require('webpack');
   
   module.exports = override(
     addWebpackPlugin(
       new webpack.HotModuleReplacementPlugin()
     )
   );
   

   同时修改client/package.json的scripts：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }
   

3. 修改Flask的app.py，集成webpack中间件：

   from flask import Flask, send_from_directory
   from webpack_dev_middleware import WebpackDevMiddleware
   from webpack_hot_middleware import WebpackHotMiddleware
   import webpack
   import os
   
   app = Flask(__name__)
   
   # 配置webpack
   webpack_config_path = os.path.join(os.getcwd(), 'client/node_modules/react-scripts/config/webpack.config.js')
   compiler = webpack(require(webpack_config_path))
   
   # 添加热重载中间件
   app.wsgi_app = WebpackDevMiddleware(compiler, public_path='/')(app.wsgi_app)
   app.wsgi_app = WebpackHotMiddleware(compiler)(app.wsgi_app)
   
   # 处理SPA路由
   @app.route('/', defaults={'path': ''})
   @app.route('/<path:path>')
   def catch_all(path):
       return send_from_directory('client/public', 'index.html')
   
   if __name__ == '__main__':
       app.run(debug=True)
   

4. 直接启动Flask就行，改React代码会自动热重载，不用单独开npm进程。

生产环境（不需要实时修改） #

如果是部署到生产环境，只需要先把React代码打包一次：

cd client && npm run build

然后Flask的app.py配置和方案1里的一样，直接Serveclient/build文件夹就行，不需要watch或者热重载。

内容的提问来源于stack exchange，提问作者anon