Reactjs 在/dist/bundle.js上添加Flask服务器以创建react应用程序默认应用程序404

我正在尝试将flask服务器连接到使用CreateReact应用程序创建的react应用程序，并使用webpack将其捆绑。除了使用默认的CreateReact应用程序作为起点外，我主要是遵循通过项目和附带视频学习到的内容

这是我的目录结构

-SimpleApp
--server
----server.py
----__init__.py
--static
----dist
------bundle.js
------styles.css
----node-modules
----src
----package.json
----package-lock.json
----webpack.config.js
----index.html
----__init__.py
--venv

基本上，我的“静态”文件夹是默认的react应用程序，外加一个index.html、一个配置文件和一个空的init.py

My server.py很简单，我在其中设置了静态文件夹和模板文件夹

server.py 它调用my index.html，它看起来像

index.html 及

package.json 我运行npm run watch和python server.py

"GET /dist/styles.css HTTP/1.1" 404 -
"GET /dist/bundle.js HTTP/1.1" 404 

这似乎可以追溯到index.html。我不认为我的配置文件或包文件与此有任何关系，但我对编写这些文件是新手，不想误解

未找到的文件位于我的应用程序的静态文件夹中，为什么它无法找到它们

我可能遗漏了一些基本概念。如果是，请给我指出正确的方向

提前谢谢

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

上述内容可能会让人困惑，而且

。static

与

。/static

编辑：刚刚查看了链接的教程。我将在下面留下我之前写的答案，但将上面的打字改为

static\u folder='../static/dist

可能是一个更快的解决您的问题

---

就我个人而言，我会通过以下方式简化这一过程：

• 请注意，您的

  server.py

  位于

  server

  目录中
• 在此

  服务器

  目录中创建两个子目录：

  模板

  和

  静态

• 将index.html移动到

  server/templates

• 将所有静态文件（包括

  dist

  子目录）移动到

  server/static

现在，目录结构应该更像：

SimpleApp
└── server
    ├── __init__.py
    ├── server.py
    ├── static
    │   └── dist
    │       ├── bundle.js
    │       └── styles.css
    └── templates
        └── index.html

然后使用以下命令初始化应用程序：

app = Flask(__name__)

这里不需要定义静态和模板目录，正如您在Flask所期望的默认结构中所做的那样

尝试点击：

http://localhost:5000/static/dist/bundle.js

，并确认加载正确

然后使用模板中的

url\u for

更新模板以从正确位置加载这些文件：

<link rel="stylesheet"
 href="{{ url_for('static', filename='dist/styles.css') }}"
>

及

---

如果您稍后重新生成

bundle.js

，您可能还需要调整网页配置以将其放置在新位置。

非常感谢，这正是我所需要的。我觉得问一个关于一个简单的打字错误的问题很愚蠢，但我很高兴也得到了关于目录组织的反馈。这可能是一件奇怪的事情。是的，我发现flask有点棘手，因为有很多不同的方式来安排代码，在学习教程时，经常会错过一些基本的东西，因为每个人的应用程序布局都略有不同。我按照您第一次的建议做了，更改了static_folder=“../static/dist”，效果很好。我决定按照您的建议重新构建项目格式，当我运行“npm run watch”时，我得到了npm ERR！simpleapp@1.0.0观察：

webpack--progress-d--config webpack.config.js--watch

npm ERR！退出状态1 npm错误！npm错误！在完整堆栈中失败-template@1.0.0看剧本。npm错误！这可能不是npm的问题。上面可能还有额外的日志输出。“没关系，我想出来了。在我的配置文件中，我需要将“path:path.join（uu dirname+'/dist'）”更改为“path:u dirname+'/dist'，”。我不知道为什么path.join函数会破坏一个应用程序而不是另一个，但至少它可以工作。

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

SimpleApp
└── server
    ├── __init__.py
    ├── server.py
    ├── static
    │   └── dist
    │       ├── bundle.js
    │       └── styles.css
    └── templates
        └── index.html

app = Flask(__name__)

<link rel="stylesheet"
 href="{{ url_for('static', filename='dist/styles.css') }}"
>

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