flask + vue

1. flask 只能加载静态文件，意思是说，flask 不能加载*.vue 文件，我们需要通过npm run build 将*.vue 文件转换成静态的*.js 文件

2. 目录结构

flask/app.py

flask/static

flask/templates

web/dist

3. 安装vue-cli

3.1 install node.js

download link: https://nodejs.cn/download/ (use the state version 20.17.0)

3.2  check the result of installation

node -v

npm -v

3.3 install vue-cli

npm install -g @vue/cli

4. 生成 web 

vue create web -- 生成默认的web 程序

5. 生成静态的js文件

npm run build -- web目录下会新生成一个dist的目录 (web/dist)

6. 修改flask/app/app.py 程序中的static_folder，static_url_path，template_folder

Note:static_folder(默认值是static)，static_url_path（默认值是/static/），template_folder(默认值是templates), 也就说，默认情况下我们需要将web/dist/ 目录下的html文件和ico文件放到flask/templates 下，将js, css 目录放到flask/static 目录下。为了避免复制，我们修改他们的值都指定的路径下。根路径是基于flask/, 应为flask和web 同级，所以是'../web/dist'

from flask import Flask, send_from_directory, render_template

app = Flask(__name__, static_folder='../web/dist', static_url_path='', template_folder='../web/dist')

@app.route('/')

def home():

    return render_template("index.html")

if __name__ == '__main__':

    app.run(debug=True)

7. run app.py

python app.py

8. 访问server

在浏览器上输入127.0.0.1：5000