Vueとflaskの連携のやり方【Vue&flask】

プロジェクトを用意する

まず最初に作業フォルダを作ります。今回はVueをfrontendディレクトリ,flaskをbackendディレクトリにして作業します。

プロジェクト名
├── backend
└── frontend

プロジェクトフォルダとbackendフォルダを作成

プロジェクトフォルダとbackendフォルダを作成します。

そしたらbackendフォルダにapp.pyを追加しておきましょう。

プロジェクト名
└── backend
    └── app.py

Vue CLIでfrontendを作成

プロジェクトフォルダ直下にVue CLIでfrontendのフォルダを作成します。また今回はVue Routerを使います。

vue create frontend

プロジェクト名
├── backend
│   └── app.py
└── frontend
    ├── README.md
    ├── babel.config.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    └── src

flask側のコードを書く

一通りプロジェクトが作り終わったらapp.pyにバックエンド側のコードを書いていきます。

普通にflaskを書く時との違いのポイントは２つです。

VueでSPAを実装するので全てのURLでファイルを返す必要がある。
ファイルの参照先を変更する。

flaskをSPAに対応させる(全てのURLでファイルを返す)

SPAで実装する際のflaskでは全てのパスにおいて表示する必要があります。
SPAに対応させるには以下のようにルーティングをすればOKです。

@app.route('/',defaults={'path':''})
@app.route('/<path:path>')
def index(path):
    return render_template('index.html')

Single-Page Applications — Flask Documentation (1.1.x)

ファイルの参照先を変更する

flaskではrender_templateでファイルを返すのが一般的かと思いますが、デフォルトではtemplatesフォルダを参照してファイルを返しています。
つまりtemplatesフォルダにないファイルはrender_templateができないということになります。

この参照先は変更することができます。
今回はfrontend側のVueでbuildした結果生成されるファイルを参照するべきなので、
frontend/distを参照します。
(Vueではbuildされるとdistフォルダを生成する)

render_templateで返すファイルの参照先はtemplate_folder
static系ファイルの参照先はstatic_folder　(dist/staticの作り方は下で解説)
で変更できます。

app = Flask(__name__, static_folder='../frontend/dist/static', template_folder='../frontend/dist')

flaskのコードまとめ

from flask import Flask, render_template
  
app = Flask(__name__, static_folder='../frontend/dist/static', template_folder='../frontend/dist')

@app.route('/',defaults={'path':''})
@app.route('/<path:path>')
def index(path):
    return render_template('index.html')

if __name__=='__main__':
    app.run(debug=True)

Vue側のコード

先ほどflaskでstatic系のファイルはstaticフォルダに参照するように変更しました。
しかしデフォルトではstaticフォルダは生成されないので、staticフォルダを作って、その配下にstatic系のファイルを生成するように設定します。
具体的にはfrontendフォルダ直下にvue.config.jsを作ります。
vue.config.jsはデフォルトではないのでtouchコマンド等でファイルを作ってください。

vue.config.jsには以下の内容を記述します。

module.exports = {
    assetsDir: "static",
  }

プロジェクト名
├── backend
│   └── app.py
└── frontend
    ├── README.md
    ├── babel.config.js
    ├── dist
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    ├── src
    └── vue.config.js

あとはflask側が参照するファイルを生成するために、Vueをビルドしましょう。
以下のコマンドをfrontendフォルダ下で実行します。