flask + vue

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

2. flask 目录

flask/

flask/app/app.py

flask/web/ -- 我们在flask目录下，用命令 “vue create web” 生成web 目录

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的目录

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

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

原文地址：https://blog.csdn.net/shangtaobocdns/article/details/142427043

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！