vue前端flask后端集成

Question

下面是我的 vue 前端构建（npm rum build on vue-cli 3）。

下面是我的 run.py flask 后端文件。

from flask import Flask, render_template


class CustomFlask(Flask):
    jinja_options = Flask.jinja_options.copy()
    jinja_options.update(dict(
        variable_start_string='%%',
        variable_end_string='%%',
    ))


app = CustomFlask(__name__,
                  static_folder="./dist",
                  template_folder="./dist"
                  )


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


if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)

如您所见，由于我的 dist 结构，我已将默认的 flask 静态模板目录更改为 ./dist。但是当我尝试测试我的应用程序时，我收到以下消息。

Chrome 控制台

vendor.97db904d.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
app.9aaff056.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
app.197e53a9.css Failed to load resource: the server responded with a status of 404 (NOT FOUND)
vendor.97db904d.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
app.9aaff056.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)
app.197e53a9.css Failed to load resource: the server responded with a status of 404 (NOT FOUND)

烧瓶

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/vendor.97db904d.js HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/app.9aaff056.js HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /css/app.197e53a9.css HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/vendor.97db904d.js HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/manifest.ce28c628.js.map HTTP/1.1" 404 -
127.0.0.1 - - [11/Apr/2018 19:44:21] "GET /js/app.9aaff056.js HTTP/1.1" 404 -

如何正确更改 Flask 上的 static/template 目录？还是我应该更改 vue-cli3(webpack) 上的构建配置？我对此没有更多的线索。如果可以的话，请给我一个提示。提前谢谢你。

Answer 1

如果您更改 vue-cli 构建以将 dist 文件夹的内容放入 Flask static 文件夹中，那将起作用。但是，您需要更改初始化 Flask app 和提供 index.html 文件的方式。

# vue-flask.py   

from flask import Flask

app = Flask(__name__, static_url_path='')


@app.route('/')
def index():

    # changed to send_static_file
    return app.send_static_file('index.html')


if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)

项目结构如下：

我在 react 和 Flask 集成的情况下使用了相同的方法，但最终将其拆分为两个微服务，如 here 所述。

Answer 2

我最近在一个应用程序中使用了 this example，效果很好。

特别是关于配置重定向的段落。

vue前端flask后端集成

vue front-end flask back-end integration

flask

webpack

vue.js

vue-cli