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_template

app = 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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/378308.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

牛客网SQL进阶127: 月总刷题数和日均刷题数

官网链接: 月总刷题数和日均刷题数_牛客题霸_牛客网现有一张题目练习记录表practice_record,示例内容如下:。题目来自【牛客题霸】https://www.nowcoder.com/practice/f6b4770f453d4163acc419e3d19e6746?tpId240 0 问题描述 基于练习记录表…

PyTorch深度学习实战(23)——从零开始实现SSD目标检测

PyTorch深度学习实战(23)——从零开始实现SSD目标检测 0. 前言1. SSD 目标检测模型1.1 SSD 网络架构1.2 利用不同网络层执行边界框和类别预测1.3 不同网络层中默认框的尺寸和宽高比1.4 数据准备1.5 模型训练 2. 实现 SSD 目标检测2.1 SSD300 架构2.2 Mul…

深度学习的新进展:解析技术演进与应用前景

深度学习的新进展:解析技术演进与应用前景 深度学习,作为人工智能领域的一颗璀璨明珠,一直以来都在不断刷新我们对技术和未来的认知。随着时间的推移,深度学习不断迎来新的进展,这不仅推动了技术的演进,也…

Vue中路由守卫的详细应用

作为一名web前端开发者,我们肯定经常使用Vue框架来构建我们的项目。而在Vue中,路由是非常重要的一部分,它能够实现页面的跳转和导航,提供更好的用户体验。然而,有时我们需要在路由跳转前或跳转后执行一些特定的逻辑&am…

vue3项目中的404页面

vue3项目中的404页面 春节前的最后一篇技术博客了 写了不少vue项目,发现一直没有正确处理404页面。404页面的出现有这么几种可能: 错误输入了页面地址路由连接跳转时,某些路由已经不存在了,而程序员并没有正确处理 也就是说40…

C 语言学习七:指针

指针 指针与地址指针的声明和初始化指针的解引用指针的比较指针和数组指针数组指针和动态内存分配 指针与函数参数指针作为函数参数二级指针 指向函数的指针 指针与地址 指针的声明和初始化 int variable 42; int *ptr &variable; //间接访问 int value *ptr; // valu…

【竞技宝】LOL:369兰博豪取四杀带队翻盘 TES2-0轻取WBG

北京时间2024年2月8日,英雄联盟LPL2024春季赛在昨天迎来第三周第三个比赛日,本日第二场比赛由TES对阵WBG。本场比赛TES中后期团战的处理更加出色,第二局更是在后期凭借369兰博的四杀完成翻盘,TES2-0轻取WBG。以下是本场比赛的详细…

蓝桥杯Web应用开发-CSS3 新特性【练习三:文本阴影】

文本阴影 text-shadow 属性 给文本内容添加阴影的效果。 文本阴影的语法格式如下: text-shadow: x-offset y-offset blur color;• x-offset 是沿 x 轴方向的偏移距离,允许负值,必须参数。 • y-offset 是沿 y 轴方向的偏移距离&#xff0c…

GEE详细教程之:将Landsat8与Landsat9影像合成一个影像

1.前言 因项目需求,需要获取一个研究区的Landsat8影像,但Landsat8重复周期长,加之天气的影响,很难获取影像质量较好的影像。Landsat4/5/7的波段顺序与landsat8不同,除此之外,landsat7影像还需要工具进行条带…

222. 完全二叉树的节点个数 - 力扣(LeetCode)

题目描述 给你一棵 完全二叉树 的根节点 root ,求出该树的节点个数。 完全二叉树 的定义如下:在完全二叉树中,除了最底层节点可能没填满外,其余每层节点数都达到最大值,并且最下面一层的节点都集中在该层最左边的若干…

重装系统---首次安装java的JDK

1、去官网或者百度资源选择自己想要下载的jdk版本即可 2、 3、按照步骤安装即可,路径不要更改,默认c盘安装就好,避免后面发生错误。 4、打开电脑的设置,编辑环境变量 这是添加之后的效果 5、再新建一个系统环境变量 6、编辑环境变量Path 添

3.3-媒资管理之MinIo分布式文件系统上传视频

文章目录 媒资管理5 上传视频5.1 需求分析5.2 断点续传技术5.2.1 什么是断点续传5.2.2 分块与合并测试5.2.3 视频上传流程5.2.4 minio合并文件测试 5.3 接口定义5.4 上传分块开发5.4.1 DAO开发5.4.2 Service开发5.4.2.1 检查文件和分块5.4.2.2 上传分块5.4.2.3 上传分块测试 5.…

Ubuntu安装SVN服务并结合内网穿透实现公网访问本地存储文件

🔥博客主页: 小羊失眠啦. 🎥系列专栏:《C语言》 《数据结构》 《C》 《Linux》 《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默&…

2. Maven 继承与聚合

目录 2. 2.1 继承 2.2继承关系 2.2.1 思路分析 2.2.2 实现 2.1.2 版本锁定 2.1.2.1 场景 2.1.2.2 介绍 2.1.2.3 实现 2.1.2.4 属性配置 2.2 聚合 2.2.1 介绍 2.2.2 实现 2.3 继承与聚合对比 maven1:分模块设计开发 2. 在项目分模块开发之后啊&#x…

【Qt学习笔记】Qt Creator环境下 信号与槽 详解(自定义信号槽、断连、lambda表达式等)

文章目录 1. 信号槽概念1.1 信号的本质1.2 槽的本质1.3 标准信号槽1.4 信号槽 实例 2. 自定义信号槽2.1 自定义槽函数2.2 自定义信号2.3 带参 信号槽 3. 信号槽的意义 与 作用4. 信号槽断连 (了解)5. lamda表达式的使用5.1 基本用法5.2 捕获局部变量5.3 …

代码随想录算法训练营DAY16 | 二叉树 (3)

一、LeetCode 104 二叉树的最大深度 题目链接:104.二叉树的最大深度https://leetcode.cn/problems/maximum-depth-of-binary-tree/ 思路:采用后序遍历递归求解。 class Solution {int ans 0;public int maxDepth(TreeNode root) {if(root null){retur…

阿里云学生服务器完成验证领取300元无门槛代金券和优惠权益

阿里云高校计划「云工开物」学生和教师均可参与,完成学生认证和教师验证后学生可以免费领取300元无门槛代金券和3折优惠折扣,适用于云服务器等全量公共云产品,订单原价金额封顶5000元/年,阿里云百科aliyunbaike.com分享阿里云高校…

2024等保贯穿总结

严重不符合项: 离职人员不能在报告上签字!!!因为人员离职导致测评人员不够的(会开观察项) 业务受理人员:管合同的人员、签合同的人员、市场部和人员有关的人员都要写进来 签字的人员一定要有相…

rust语言tokio库底层原理解析

目录 1 rust版本及tokio版本说明1 tokio简介2 tokio::main2.1 tokio::main使用多线程模式2.2 tokio::main使用单线程模式 3 builder.build()函数3.1 build_threaded_runtime()函数新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图…

springboot-web服务迁移Kubernetes

1、搞定基础镜像 docker pull openjdk:8-jre-alpine docker tag openjdk:8-jre-alpine 10.204.82.15/kubernetes/openjdk:8-jre-alpine docker push 10.204.82.15/kubernetes/openjdk:8-jre-alpine 2、springboot-web应用服务打包 3、编写Dockerfile构建镜像 FROM 10.204.82.…