当前位置: 首页 > article >正文

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


http://www.kler.cn/a/315860.html

相关文章:

  • 3.5【数据库系统】ER图
  • Tomcat与Nginx之全面比较
  • 重新认识HTTPS
  • 力扣 653. 两数之和 IV 二叉树/binary-tree two-sum IV
  • Vue 3 中,computed 和 watch的区别
  • LeetCode【0016】最接近的三数之和
  • CCF CSP题解:字符串变换(str)(202409-2)
  • 多态对象的内存结构
  • [Python学习日记-27] 文件操作练习题解析
  • Java的IO流(二)
  • 基于STM32残疾人辅助行走系统
  • Kotlin 基本介绍(二)
  • macos pyenv 安装python tk 、tkinter图形库方法步骤和使用总结
  • jQuery Mobile 方向改变事件
  • 01 基础request
  • Python进阶学习笔记(一)对象
  • vue的基本原理
  • linux下共享内存的3种使用方式
  • 串的存储实现方法(与链表相关)
  • centos7 源码编译安装faiss
  • 3、论文阅读:EnYOLO:一种基于图像增强的水下目标区域自适应实时检测框架
  • 【Unity设计模式】Unity MVC/MVP架构介绍,及MVC/MVP框架的简单应用
  • Linux —— 网络基础(一)
  • 设计模式中工厂模式的C语言实现
  • python是什么语言写的
  • 一个基于Java SSM框架(Spring、SpringMVC、MyBatis)的沙县小吃点餐系统