Flask无法找到React动态生成的bundle.js，仅能加载index.html

看起来你遇到的核心问题是浏览器请求的bundle.js路径和实际文件存放的路径不匹配，结合你的项目目录结构，我给你几个针对性的解决方案：

1. 最直接：修正index.html里的bundle.js引用路径 #

你的bundle.js实际存放在static/dist/bundle.js，但浏览器现在在根路径（/bundle.js）找它，肯定找不到。直接修改index.html里的script标签：

• 如果你想用绝对路径（推荐，避免相对路径的层级问题）：

<script src="/static/dist/bundle.js"></script>

• 如果你想用相对路径（前提是index.html在static根目录）：

<script src="dist/bundle.js"></script>

2. 更规范：改用Flask模板系统（推荐） #

Flask默认把前端模板文件放在templates文件夹，而不是static里，用模板系统的url_for函数可以自动生成正确的静态文件路径，避免手动写路径出错：

步骤1：调整目录结构 #

把static/index.html移动到项目根目录下新建的templates文件夹里，变成：

.
|-- __init__.py
|-- static
|   |-- dist
|   |   `-- bundle.js
|   |-- node_modules
|   |-- package.json
|   |-- package-lock.json
|   |-- src
|       |-- App.css
|       |-- ...
|-- templates
|   `-- index.html

步骤2：修改app.py的路由 #

用render_template返回模板文件：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

步骤3：在模板里引用bundle.js #

用url_for生成正确的静态文件路径：

<script src="{{ url_for('static', filename='dist/bundle.js') }}"></script>

这种方式的好处是，不管你后续怎么调整Flask的静态文件配置，路径都会自动适配，不会出错。

3. 可选：修改Flask静态文件配置（适合想简化路径的场景） #

如果你希望直接用/bundle.js就能访问到static/dist/bundle.js，可以在初始化Flask app时修改静态文件的配置：

from flask import Flask

app = Flask(__name__, static_folder='static/dist', static_url_path='/')

这样配置后，static/dist下的文件就会被映射到根路径，浏览器请求/bundle.js就能找到它。不过要注意，这种方式会让static/dist成为默认静态目录，如果你还有其他静态文件（比如css、图片）在static其他子目录，可能需要额外配置，所以除非特殊需求，不推荐这种方式。

最后检查几个常见坑 #

• 确认static/dist/bundle.js确实存在：有时候React编译失败会导致bundle.js没生成，去文件夹里看看文件是否存在、大小是否正常。
• 确保在项目根目录运行Flask：如果从子目录启动app，Flask可能会找不到静态文件路径，建议在项目根目录下执行flask run或者python app.py。
• 清除浏览器缓存：有时候浏览器会缓存旧的错误路径，按Ctrl+F5强制刷新页面再测试。

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