Vue.js+Flaskの環境構築備忘録〜Anaconda3を添えて〜

はじめに

私が愛用しているFlaskでVueを使いたくなったので環境構築手順をメモしておきます。
自分用の走り書きです。

登場人物

• Vue.js（Vue CLI）
• Flask
• Anaconda3

手順

conda仮想環境の作成

Anaconda3で必要なライブラリをインストールした仮想環境を作る。
僕は大概、conda環境の中身にscriptsという開発フォルダを作成しています。
なので、その中にflaskフォルダとvueフォルダを作成します。

flask環境構築

from flask import Flask, render_template, request, jsonify, make_response, send_file
app = Flask(__name__, static_folder='../vue/dist/static', template_folder='../vue/dist')

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

if __name__ == "__main__":
    app.run()

template_folderとstatic_folderでvueのビルドフォルダを指定しておく。

vueアプリケーション作成とビルド設定

vueフォルダにアプリケーションを作成します。
僕はvue uiでサクッと作成します。
vueフォルダ直下にvue.config.jsという設定ファイルを作成し、以下のとおりにします。

module.exports = {
    assetsDir: 'static',
  };

.jsファイルやらを全てdist/staticフォルダに保存するという設定です。

##完成
vueでビルド後にflaskサーバを起動すれば、vueアプリケーションが読み込まれます。