Ниже представлена моя сборка интерфейса vue (npm rum build
на vue-cli 3).
А ниже мой файл 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)? Я больше не понимаю этого. Пожалуйста, дайте мне подсказку, если сможете. Заранее спасибо.
Если вы измените сборку 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
, но в итоге разделил его на два микросервиса, как описано здесь.
Недавно я использовал этот пример в приложении, и он работал очень хорошо.
В частности параграф о настройке редиректов.
Работает как часы!
static_url_path=''
иapp.send_static_file('index.html')
были ключевыми моментами. Я тоже проверю и изучу вашу ссылку. Спасибо.