Question

作为回应，我创建了一个文件夹./public/assets，并将图像放在./public/assets中。运行npm start时一切正常。在运行npm run build后，我得到一个./build文件夹。我将./build文件夹中的文件和文件夹复制到了flask文件夹。由于应将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等。

Answer 1

如果在flask应用程序中具有这样的构建目录：

.
|
|_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

在这种情况下，我将烧瓶和react应用程序合并在同一目录中。您可以放入不同的目录，然后将build目录移动到flask应用程序的根目录。还是喜欢这个建议like this。

编辑（另一种选择）：

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

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.ico和manifest.json。无需为此在烧瓶上添加自定义路由。

Answer 2

希望这可以帮助您

反应构建文件夹

build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── precache-manifest.984ab282787c862e232c323b865ef221.js
├── robots.txt
├── service-worker.js
└── static\

使用正则表达式服务公共资源

import flask
from werkzeug.routing import BaseConverter

class RegexConverter(BaseConverter):
    def __init__(self, url_map, *items):
        super(RegexConverter, self).__init__(url_map)
        self.regex = items[0]

app = flask.Flask(__name__, template_folder='build', static_folder='build/static')
app.url_map.converters['regex'] = RegexConverter

@app.route("/<regex(r'(.*?)\.(json|txt|png|ico|js)$'):file>", methods=["GET"])
def public(file):
    return flask.send_from_directory('./build', file)

flask如何为React公共文件提供服务

2 个答案: