Flaskブループリントを使用して複数ページのWebアプリを提供しようとしています。Webアプリの構造:
ランディングページhtml->ログイン-> Vuejs SPA
フラスコ構造:
app/
client/
dist/
static/
js/
css/
vue_index.html
client.py
main/
main.py
static/
index.html
__init__.py
__init_.py
app.register_blueprint(main_bp)
app.register_blueprint(client_bp)
client.py
client_bp = Blueprint('client', __name__,
url_prefix='/client',
static_url_path='/client/static',
static_folder='dist/static',
template_folder='dist',
)
@client_bp.route('/')
def client():
dist_dir = current_app.config['DIST_DIR'] #full path to dist folder
entry = os.path.join(dist_dir, 'vue_index.html')
return send_file(entry)
vue_index.html
<!DOCTYPE html><html>...<script src=/static/js/index.js></script></body></html>
次に、アプリを実行してhost:port / clientにリダイレクトします。vue_index.htmlは見つかりましたが、ファイルで参照されている.jsファイルが見つかりません。
ただし、js /フォルダーをapp / client / dist / staticからapp / staticに移動すると、vue_index.htmlファイルでjsコードを見つけることができます。
したがって、ブループリントがフラスコアプリの静的パスをオーバーライドしていないことは明らかです。静的パスをデバッグする方法/これを修正する方法についてのアイデアはありますか?
すべてのflask静的ファイルとテンプレートを新しいdist /フォルダーに配置し、すべてのvuejsファイルをこのフォルダーに追加することでこれを機能させました。
webapp/
dist/
js/ (vuejs files)
css/ (vuejs and flask landing page .css)
index.html (vuejs entry)
other.html (flask misc webpage)
次に、アプリを実行します。
app = Flask(__name__,
static_folder='./dist',
template_folder='./dist',
static_url_path='')
それは理想的ではありません(私はそれ自体でvuejsファイルをdistに保持し、静的フォルダーとテンプレートフォルダーを持ちたいと思っていましたが、それを機能させることができませんでした)
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加