Question

我正在使用react-create-app构建一个Web应用程序，并希望使用flask提供它。前端是使用

生成的

npx create-react-app frontend
cd frontend
npm run build

我的项目结构如下：

- backend
    - static
    - templates
    - app.py
- frontend
    - build
        - static
            - css
                ...
            - js
                ...
            - media
                ...
        - favico.ico
        - index.html
        - service-worker.js
        - ...
    - public
        ...
    - src
        ...
    - ...

app.py

from flask import Flask, send_from_directory
import os


app = Flask(__name__, static_folder=r'..\frontend\build')


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
    if path != "" and os.path.exists("/static/" + path):
        return send_from_directory(app.static_folder, path)
    else:
        return send_from_directory(app.static_folder, 'index.html')


if __name__ == '__main__':
    app.run(use_reloader=True, port=5000, threaded=True, debug=True)

如果我正在运行serve -s build，则应用程序将运行，并且一切都很好。但是，运行python app.py显示空白页，而Chromes控制台显示以下错误：

Uncaught SyntaxError: Unexpected token < 2.b41502e9.chunk.js:1
Uncaught SyntaxError: Unexpected token < main.4001340c.chunk.js:1 
Manifest: Line: 1, column: 1, Unexpected token. :5000/manifest.json:1

似乎浏览器无法解释jsx语法。我该如何解决这个问题？

Answer 1

您安装了Flask吗？

npm install flask

Answer 2

我自己解决了这个问题，实际上是您实际上在为所有请求提供index.html。因此*chunk.js是html，而不是Javascript，因此会出现语法错误。

这是因为以下原因：

if path != "" and os.path.exists("/static/" + path):

始终为假。 /static/在这种情况下不是有意义的路径。

将其更改为：

if path != "" and os.path.exists(f"{app.static_folder}/{path}"):

就可以了。

使用Flask“ Uncaught SyntaxError：Unexpected token <”提供服务的create-react-app

2 个答案: