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)
相关文章:
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". 具体解释可以看vi…...
labelimg 在pycharm下载使用
labelimg 使用数据标注工具 labelimg 制作数据集 在pycharm中搜索labelimg 选择版本安装 labelimg install 使用数据标注工具制作数据集 启动 带参数启动 1、cmd cd到指定目录 2、带参数启动标注工具 左侧可以选择切换为需要的数据格式 一些快捷键 和自动保存,…...
STM32/C51开发环境搭建(KeilV5安装)
Keil C51是美国Keil Software公司出品的51系列兼容单片机C语言软件开发系统,与汇编相比,C语言在功能上、结构性、可读性、可维护性上有明显的优势,因而易学易用。Keil提供了包括C编译器、宏汇编、链接器、库管理和一个功能强大的仿真调试器等…...
前端开发 :(二)HTML基础
1. 介绍HTML 1.1 HTML的定义和作用 HTML(HyperText Markup Language)是一种标记语言,用于创建和设计网页的结构和内容。它通过使用标签来描述文档的结构,使得浏览器能够正确地解释和显示页面。 1.2 HTML的发展历史 HTML的发展…...
小米平板6获取root权限教程
1. 绑定账号 1> 打开"设置-我的设备-全部参数-连续点击MIUI版本按钮",直到提示已打开开发者模式( p s : 这里需要重点关注红框平板型号和 M I U I 版本,例如我这里平板型号是 X i a o m i P a d 6 , M I U I 版本是 14.0.10 &am…...
01. k210-命令行环境搭建(ubuntu环境)
本文主要讲解k210在ubuntu23.04操作系统中的环境搭建 1.获取工具链 github下载工具链 截止到目前最新版本是:Kendryte GNU Toolchain v8.2.0-20190409[Pre-release]。 编译好的镜像有ubuntu版本和windows版本,本章我们主要讲解的是ubuntu系统的开发环境。 Versio…...
Spring Boot3整合Redis
⛰️个人主页: 蒾酒 🔥系列专栏:《spring boot实战》 🌊山高路远,行路漫漫,终有归途。 目录 前置条件 1.导依赖 2.配置连接信息以及连接池参数 3.配置序列化方式 4.编写测试 前置条件 已经初始化好一个spr…...
算法之美_2024
算法与数据结构进阶 – liuyubobo 学习链接 : 算法与数据结构 玩转算法面试 – Leetcode真题分门别类讲解 学习链接:玩转算法面试 LLM行业领军大佬 带你转型大语言模型 学习链接:LLM 区块链 学习链接:区块链 运维测试 学…...
Leetcode刷题笔记题解(C++):590. N 叉树的后序遍历
思路:类似于二叉树的排序,这里需要将子树进行依次递归遍历,前序遍历也与之类似 /* // Definition for a Node. class Node { public:int val;vector<Node*> children;Node() {}Node(int _val) {val _val;}Node(int _val, vector<N…...
华为CC++语言编程规范--笔记
华为C&C语言编程规范 1.基本要求1.1 变量规则1.1.1:指针变量、表示资源描述符的变量、BOOL变量声明必须赋予初值规则1.1.2:指向资源句柄或描述符的变量,在资源释放后立即赋予新值规则1.1.3:类的成员变量必须在构造函数中赋予初…...
洛谷_P5461 赦免战俘_python写法
捋一下这道题的思路,理解了题目的意思之后我们知道这道题一定会用递归。 那递归的出口很简单,矩阵为1x1的时候就是题目所说的不能再细分下去的意思。 问题就在于递归体。 我对于递归体的理解是找到一个普适的规律,这个规律适用于每一次的递归…...
RabbitMQ的延迟队列实现[死信队列](笔记二)
上一篇已经讲述了实现死信队列的rabbitMQ服务配置,可以点击: RabbitMQ的延迟队列实现(笔记一) 目录 搭建一个新的springboot项目模仿订单延迟支付过期操作启动项目进行测试 搭建一个新的springboot项目 1.相关核心依赖如下 <dependency><groupId>org.…...
买电脑注意事项之CPU型号后面的字母都代表什么意思
在 CPU 型号后面的字母通常表示该 CPU 的一些特性或用途。不同的字母可能代表不同的系列、性能级别、功耗特性等。以下是一些常见的 CPU 后缀字母及其可能的含义: U(例如:i5-8250U): Ultra Low Power:表示低功耗&#…...
Transformer实战-系列教程11:SwinTransformer 源码解读4(WindowAttention类)
🚩🚩🚩Transformer实战-系列教程总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 点我下载源码 SwinTransformer 算法原理 SwinTransformer 源码解读1(项目配置/SwinTr…...
Jenkins(本地Windows上搭建)上传 Pipeline构建前端项目并将生成dist文件夹上传至指定服务器
下载安装jdk https://www.oracle.com/cn/java/technologies/downloads/#jdk21-windows 下载jenkins window版 双击安装 https://www.jenkins.io/download/thank-you-downloading-windows-installer-stable/ 网页输入 http://localhost:8088/ 输入密码、设置账号、安装推…...
Elasticsearch 安装和配置脚本文档
Elasticsearch 安装和配置脚本文档 目录 **Elasticsearch 安装和配置脚本文档**0.**概述**1.**使用方法:**2.**脚本步骤:**3. **完整代码如下:** 0.概述 此Bash脚本用于自动化在CentOS 7系统上安装和配置Elasticsearch(ES&#x…...
【Android辟邪】之:gradle——在项目间共享依赖关系版本
翻译和简单修改自:https://docs.gradle.org/current/userguide/platforms.html#sec:sharing-catalogs 建议看原文(有能力的话) 现在 Gradle 脚本可以使用两种语法编写:Kotlin 和 Groovy 本文只使用kotlin脚本语法,更…...
Qt 项目树工程,拷贝子项目dll到子项目exe运行路径
1、项目树工程 2、项目树列表 ---- BuildAll -------- App (exe) -------- Database (dll) 注:使用 子项目–>添加库–>内部库 的方式 3、qmake 内置的变量 $$OUT_PWD 表示输出文件(如可执行文件…...
进程间通信方式
1>内核提供的原始通信方式有三种 1)无名管道 2)有名管道 3)信号 2>System V提供了三种通信方式 4)消息队列 5)共享内存 6)信号量(信号灯集) 3>套接字通信 7)socke…...
[linux]:匿名管道和命名管道(什么是管道,怎么创建管道(函数),匿名管道和命名管道的区别,代码例子)
目录 一、匿名管道 1.什么是管道?什么是匿名管道? 2.怎么创建匿名管道(函数) 3.匿名管道的4种情况 4.匿名管道有5种特性 5.怎么使用匿名管道?匿名管道有什么用?(例子) 二、命名…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库,提供了高效、安全的文本格式化功能,是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全:…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素,返回一个新的数组。 特点: 不修改原数组:slice 不会改变原数组,而是返回一个新的数组。提取数组的部分:slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下…...
在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例
目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码:冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...
一些实用的chrome扩展0x01
简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序,无论是测试应用程序、搜寻漏洞还是收集情报,它们都能提升工作流程。 FoxyProxy 代理管理工具,此扩展简化了使用代理(如 Burp…...
多元隐函数 偏导公式
我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式,给定一个隐函数关系: F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 🧠 目标: 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z、 …...
