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

vue项目打包部署到flask等后端服务里面,实现前后端不分离部署,解决空白页面和刷新页面not fount问题

1. 编译模式一定要设置为esnext,否则会报错:

Strict MIME type checking is enforced for module scripts per HTML spec.Expected a JavaScript module script but the server responded with a MIME type of "text/plain".

具体解释可以看vite官方文档:构建选项 | Vite 官方中文文档 

2.而且路由模式要改为hash模式:

import {createRouter,createWebHistory,createWebHashHistory,RouteRecordRaw,
} from 'vue-router'// 全局路由
const router = createRouter({history: createWebHashHistory(), // 路由模式:history模式routes: routes,
})

3.flask的模板文件放置

flask项目根目录要有templates文件夹和static文件夹,用于存储vue打包后的模板文件和静态文件 

在flask中映射模板文件:

from flask import Flask, jsonify, request, render_templateapp = Flask(__name__, static_url_path='/',static_folder='static', template_folder='templates')@app.route("/")
def index():return render_template("index.html")# @app.route("/v1/server/nfcadduser", methods=["POST"])
# def add_user_nfc():
#     data_json = request.form  # 获取POST请求中的data参数
#     print(f"接收到的请求参数是: {data_json}")
#     data = {
#         "code": 200,
#         "data": data_json,
#         "msg": "操作成功"
#     }
#     return jsonify(data)if __name__ == '__main__':app.run(host="0.0.0.0", port=9080)

相关文章:

  • 【ES数据可视化】kibana实现数据大屏
  • MySQL篇----第十八篇
  • 任意IOS16系统iPad/Iphone开启台前调度
  • P1028 [NOIP2001 普及组] 数的计算题解
  • 计算机网络基本知识(二)
  • 相机图像质量研究(7)常见问题总结:光学结构对成像的影响--镜片固化
  • C++ //练习 5.5 写一段自己的程序,使用if else语句实现把数字成绩转换成字母成绩的要求。
  • hook函数——useRef
  • LabVIEW工业监控系统
  • 【Linux】Ubuntu 22.04 升级 nodejs 到 v18
  • 伪装成NodeJS的勒索病毒,勒索呼伦贝尔的空气
  • Linux运行级别 | 管理Linux服务
  • 【Linux系统学习】2.Linux基础命令
  • 华为配置内部人员接入WLAN网络示例(802.1X认证)
  • 《杨绛传:生活不易,保持优雅》读书摘录
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列(实验阶段398-2018.11.14)...
  • Eureka 2.0 开源流产,真的对你影响很大吗?
  • iOS帅气加载动画、通知视图、红包助手、引导页、导航栏、朋友圈、小游戏等效果源码...
  • javascript 总结(常用工具类的封装)
  • Java知识点总结(JavaIO-打印流)
  • jquery cookie
  • JSONP原理
  • Python 基础起步 (十) 什么叫函数?
  • Stream流与Lambda表达式(三) 静态工厂类Collectors
  • vue的全局变量和全局拦截请求器
  • 从setTimeout-setInterval看JS线程
  • 回流、重绘及其优化
  • 基于 Babel 的 npm 包最小化设置
  • 基于遗传算法的优化问题求解
  • 前嗅ForeSpider教程:创建模板
  • 前嗅ForeSpider中数据浏览界面介绍
  • 白色的风信子
  • 进程与线程(三)——进程/线程间通信
  • ​LeetCode解法汇总518. 零钱兑换 II
  • #我与Java虚拟机的故事#连载05:Java虚拟机的修炼之道
  • #我与Java虚拟机的故事#连载16:打开Java世界大门的钥匙
  • (11)MATLAB PCA+SVM 人脸识别
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (编译到47%失败)to be deleted
  • (带教程)商业版SEO关键词按天计费系统:关键词排名优化、代理服务、手机自适应及搭建教程
  • (附源码)springboot助农电商系统 毕业设计 081919
  • (企业 / 公司项目)前端使用pingyin-pro将汉字转成拼音
  • (三维重建学习)已有位姿放入colmap和3D Gaussian Splatting训练
  • (转)如何上传第三方jar包至Maven私服让maven项目可以使用第三方jar包
  • .NET 5种线程安全集合
  • .net Stream篇(六)
  • .net 验证控件和javaScript的冲突问题
  • .Net多线程总结
  • @Autowired 与@Resource的区别
  • [ JavaScript ] JSON方法
  • [ 网络基础篇 ] MAP 迈普交换机常用命令详解
  • [23] GaussianAvatars: Photorealistic Head Avatars with Rigged 3D Gaussians
  • [BZOJ] 1001: [BeiJing2006]狼抓兔子
  • [codevs 1515]跳 【解题报告】
  • [CUDA手搓]从零开始用C++ CUDA搭建一个卷积神经网络(LeNet),了解神经网络各个层背后算法原理