Vue front-end flask внутренняя интеграция

Ниже представлена ​​моя сборка интерфейса vue (npm rum build на vue-cli 3).

enter image description here

А ниже мой файл 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 из-за моей структуры 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 -

Как правильно изменить каталог static / template на фляге? или мне следует изменить конфигурацию сборки на vue-cli3 (webpack)? Я больше не понимаю этого. Пожалуйста, дайте мне подсказку, если сможете. Заранее спасибо.

2
0
1 641
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если вы измените сборку 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)

Вот структура проекта:

enter image description here

Я использовал тот же подход в случае интеграции react и Flask, но в итоге разделил его на два микросервиса, как описано здесь.

Работает как часы! static_url_path='' и app.send_static_file('index.html') были ключевыми моментами. Я тоже проверю и изучу вашу ссылку. Спасибо.

su79eu7k 12.04.2018 17:24

Недавно я использовал этот пример в приложении, и он работал очень хорошо.

В частности параграф о настройке редиректов.

Другие вопросы по теме