vue前端烧瓶后端集成

Question

以下是我的vue前端版本（vue-cli 3上的npm rum build）。

以下是我的烧瓶后端的run.py文件。

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 static，template目录更改为./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 -

如何在烧瓶上正确更改静态/模板目录？或者我应该在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，效果非常好。

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