当前位置: 首页 > 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)

相关文章:

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、带参数启动标注工具 左侧可以选择切换为需要的数据格式 一些快捷键 和自动保存&#xff0c…...

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 叉树的后序遍历

思路&#xff1a;类似于二叉树的排序&#xff0c;这里需要将子树进行依次递归遍历&#xff0c;前序遍历也与之类似 /* // 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&#xff1a;指针变量、表示资源描述符的变量、BOOL变量声明必须赋予初值规则1.1.2&#xff1a;指向资源句柄或描述符的变量&#xff0c;在资源释放后立即赋予新值规则1.1.3&#xff1a;类的成员变量必须在构造函数中赋予初…...

洛谷_P5461 赦免战俘_python写法

捋一下这道题的思路&#xff0c;理解了题目的意思之后我们知道这道题一定会用递归。 那递归的出口很简单&#xff0c;矩阵为1x1的时候就是题目所说的不能再细分下去的意思。 问题就在于递归体。 我对于递归体的理解是找到一个普适的规律&#xff0c;这个规律适用于每一次的递归…...

RabbitMQ的延迟队列实现[死信队列](笔记二)

上一篇已经讲述了实现死信队列的rabbitMQ服务配置&#xff0c;可以点击: RabbitMQ的延迟队列实现(笔记一) 目录 搭建一个新的springboot项目模仿订单延迟支付过期操作启动项目进行测试 搭建一个新的springboot项目 1.相关核心依赖如下 <dependency><groupId>org.…...

买电脑注意事项之CPU型号后面的字母都代表什么意思

在 CPU 型号后面的字母通常表示该 CPU 的一些特性或用途。不同的字母可能代表不同的系列、性能级别、功耗特性等。以下是一些常见的 CPU 后缀字母及其可能的含义&#xff1a; U&#xff08;例如&#xff1a;i5-8250U&#xff09;: Ultra Low Power&#xff1a;表示低功耗&#…...

Transformer实战-系列教程11:SwinTransformer 源码解读4(WindowAttention类)

&#x1f6a9;&#x1f6a9;&#x1f6a9;Transformer实战-系列教程总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 点我下载源码 SwinTransformer 算法原理 SwinTransformer 源码解读1&#xff08;项目配置/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.**使用方法&#xff1a;**2.**脚本步骤&#xff1a;**3. **完整代码如下&#xff1a;** 0.概述 此Bash脚本用于自动化在CentOS 7系统上安装和配置Elasticsearch&#xff08;ES&#x…...

【Android辟邪】之:gradle——在项目间共享依赖关系版本

翻译和简单修改自&#xff1a;https://docs.gradle.org/current/userguide/platforms.html#sec:sharing-catalogs 建议看原文&#xff08;有能力的话&#xff09; 现在 Gradle 脚本可以使用两种语法编写&#xff1a;Kotlin 和 Groovy 本文只使用kotlin脚本语法&#xff0c;更…...

Qt 项目树工程,拷贝子项目dll到子项目exe运行路径

1、项目树工程 2、项目树列表 ---- BuildAll -------- App &#xff08;exe&#xff09; -------- Database &#xff08;dll&#xff09; 注&#xff1a;使用 子项目–>添加库–>内部库 的方式 3、qmake 内置的变量 $$OUT_PWD 表示输出文件&#xff08;如可执行文件…...

进程间通信方式

1>内核提供的原始通信方式有三种 1&#xff09;无名管道 2&#xff09;有名管道 3&#xff09;信号 2>System V提供了三种通信方式 4&#xff09;消息队列 5&#xff09;共享内存 6&#xff09;信号量&#xff08;信号灯集&#xff09; 3>套接字通信 7)socke…...

[linux]:匿名管道和命名管道(什么是管道,怎么创建管道(函数),匿名管道和命名管道的区别,代码例子)

目录 一、匿名管道 1.什么是管道&#xff1f;什么是匿名管道&#xff1f; 2.怎么创建匿名管道&#xff08;函数&#xff09; 3.匿名管道的4种情况 4.匿名管道有5种特性 5.怎么使用匿名管道&#xff1f;匿名管道有什么用&#xff1f;&#xff08;例子&#xff09; 二、命名…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...