Flask で Vue.js を使おうと思ったら出鼻をくじかれたのでメモ #Python

はじめに

勉強も兼ねて社内で使う簡単な Web アプリを
バックエンドは Flask で、フロントエンドは Vue.js でそれを Docker のコンテナで動かそうと、
そんな今時の感じで作ろうと思ったら出鼻をくじかれた。

いけると思ったのに

まずは　Vue.js の公式を見ながら Hello, world! 出してみようと思い、公式通りに作った。
はじめに-Vue.js

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <meta charset='utf-8'>
        <title>index</title>
    </head>
    <body>
        <div id='app'>
            {{ message }}
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</html>

Flask も最低限に記述

index.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask
from flask import g
from flask import render_template
from flask import request
from flask import Response

app = Flask(__name__)

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

def main():
    app.run(debug=True, host='0.0.0.0', port=5000)

if __name__ == '__main__':
    main()

これで、ホスト:5000->コンテナ:5000 でコンテナに穴を開けて、
http://localhost:5000/index にアクセス

何も出ないよね ??

この index.html をブラウザで普通にローカルのファイルとして読み込むとちゃんと表示される。なぜ。

答えはこう

index.html

    <body>
        <div id='app'>
            [[ message ]]
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            delimiters: ['[[', ']]']
        })
    </script>

注目は、[[ message ]] と、delimiters: ['[[', ']]']です。
これは、Flask が使用しているテンプレーエンジンのデリミタと、Vue.js のデリミタが共に{{ }}でコンフリクトしてしまっているため、Vue.js のデリミタを [[ ]]に変更しています。
delimiters-Vue.js

焦った〜