时间戳

首页 > 解决方案 > 烧瓶如何为反应公共文件提供服务

javascript - 烧瓶如何为反应公共文件提供服务

问题描述

在反应中，我创建了一个文件夹./public/assets，并将图像放入./public/assets. 我跑步时一切正常npm start。在反应中运行npm run build后，我得到一个./build文件夹。我将文件夹内的文件和文件夹复制./build到烧瓶文件夹中。由于index.html应该放在./templates烧瓶中，浏览器无法获取烧瓶中的图像./assets。

烧瓶中的文件：

.
├── app.py
├── asset-manifest.json
├── assets
│   └── Montage_of_Toronto_7.jpg
├── favicon.ico
├── manifest.json
├── precache-manifest.28e9dd49c9646209098c5bb088bdb16f.js
├── service-worker.js
├── static
│   ├── css
│   │   ├── main.2cce8147.chunk.css
│   │   └── main.2cce8147.chunk.css.map
│   ├── js
│   │   ├── 2.38e0f74c.chunk.js
│   │   ├── 2.38e0f74c.chunk.js.map
│   │   ├── main.1c5ab122.chunk.js
│   │   ├── main.1c5ab122.chunk.js.map
│   │   ├── runtime~main.a8a9905a.js
│   │   └── runtime~main.a8a9905a.js.map
│   └── media
│       └── logo.5d5d9eef.svg
└── templates
    └── index.html

react/public 中的文件夹：

.
├── assets
│   └── Montage_of_Toronto_7.jpg
├── favicon.ico
├── index.html
└── manifest.json

react/build 中的文件

.
├── asset-manifest.json
├── assets
│   └── Montage_of_Toronto_7.jpg
├── favicon.ico
├── index.html
├── manifest.json
├── precache-manifest.28e9dd49c9646209098c5bb088bdb16f.js
├── service-worker.js
└── static
    ├── css
    │   ├── main.2cce8147.chunk.css
    │   └── main.2cce8147.chunk.css.map
    ├── js
    │   ├── 2.38e0f74c.chunk.js
    │   ├── 2.38e0f74c.chunk.js.map
    │   ├── main.1c5ab122.chunk.js
    │   ├── main.1c5ab122.chunk.js.map
    │   ├── runtime~main.a8a9905a.js
    │   └── runtime~main.a8a9905a.js.map
    └── media
        └── logo.5d5d9eef.svg

是否有任何解决方案可以配置公共路径以便将./public文件夹放入./build/static？

我send_from_directory在烧瓶后端使用./assets. 但是我想./build/static在运行时将文件放入文件夹npm run build，包括文件favicon.ico等manifest.json。

标签： javascriptpythonreactjsflask

解决方案

如果您在烧瓶应用程序中有这样的构建目录：

.
|
|_build
|    |_static
|       |_css
|       |_js
|       |_img
|    |_index.html
|_serve.py

像serve.py这样：

from flask import Flask, render_template, send_from_directory


app = Flask(__name__, static_folder="build/static", template_folder="build")


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


@app.route("/manifest.json")
def manifest():
    return send_from_directory('./build', 'manifest.json')


@app.route('/favicon.ico')
def favicon():
    return send_from_directory('./build', 'favicon.ico')


app.run(host='0.0.0.0', debug=True)

参考： https ://flask.palletsprojects.com/en/1.1.x/patterns/favicon/

我认为它会起作用。

完整目录树（在本地测试）：

.
├── README.md
├── build
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── precache-manifest.054774adbe886ee6e3c29227ef1745b5.js
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── main.2cce8147.chunk.css
│       │   └── main.2cce8147.chunk.css.map
│       ├── js
│       │   ├── 2.b41502e9.chunk.js
│       │   ├── 2.b41502e9.chunk.js.map
│       │   ├── main.28647029.chunk.js
│       │   ├── main.28647029.chunk.js.map
│       │   ├── runtime~main.a8a9905a.js
│       │   └── runtime~main.a8a9905a.js.map
│       └── media
│           └── logo.5d5d9eef.svg
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── serve.py
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

在这种情况下，我将烧瓶和反应应用程序合并到同一个目录中。您可以放入不同的目录，然后将build目录移动到烧瓶应用程序的根目录。或者像这样喜欢这个建议。

编辑（另一种选择）：

您还可以编辑您的公共目录，如下所示：

public/
├── index.html
└── static
    ├── favicon.ico
    └── manifest.json

请注意，您还应该将 index.html 更改为：

<link rel="manifest" href="%PUBLIC_URL%/static/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico" />

然后，当您运行时，yarn build您将在静态目录中找到favicon.icoand 。manifest.json为此，无需在烧瓶上使用自定义路线。

推荐阅读