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)

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习中常用的性能度量—— ROC 和 AUC

什么是泛化能力? 通常我们用泛化能力来评判一个模型的好坏,通俗的说,泛化能力是指一个机器学期算法对新样本(即模型没有见过的样本)的举一反三的能力,也就是学以致用的能力。 举个例子,高三的…

删除和清空Hive外部表数据

外部表和内部表区别 未被external修饰的是内部表(managed table),被external修饰的为外部表(external table); 区别: 内部表数据由Hive自身管理,外部表数据由HDFS管理; …

Rebuild企业管理系统 SSRF漏洞(CVE-2024-1021)

免责声明:文章来源互联网收集整理,请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该…

【人工智能】人工智能 – 引领未来科技的潮流

写在前面 引言红利挑战结论 引言 人工智能是指使计算机系统表现出类似于人类智能的能力。其目标是实现机器具备感知、理解、学习、推理和决策等智能行为。人工智能的发展可以追溯到上世纪50年代,随着计算机技术和算法的不断进步,人工智能得以实现。 今天…

Pymysql之Connection中常用API

Connection中常用API 1、open() :检测数据库是否连接。 connect.open:如果数据库连接返回Trhe,否则返回False。 2、ping(reconnectTrue) connect.ping(reconnectTrue):如果reconnectTrue表示连接断开后,重新进行连接。 import…

移动云ONAIR媒体云全解读!媒体内容数字化融合一站式解决方案

当下,传统媒体面临着诸多挑战,如何利用信息技术提升内容的质量、形式和分发效率,成为媒体行业的迫切需求。移动云作为数字中国建设的“主力军”, 立足于新兴媒体与云计算市场的变化与需求,推出了ONAIR 媒体云解决方案&…

【FPGA】高云FPGA之IP核的使用->PLL锁相环

FPGA开发流程 1、设计定义2、设计输入3、分析和综合4、功能仿真5、布局布线6、时序仿真7、IO分配以及配置文件(bit流文件)的生成8、配置(烧录)FPGA9、在线调试 1、设计定义 使用高云内置IP核实现多路不同时钟输出 输入时钟50M由晶…

postman执行批量测试

1.背景 有许多的人常常需要使用第三方系统进行重复的数据查询,本文介绍使用PostMan的方式对数据进行批量的查询,减少重复的劳动。 2.工具下载 3.初入门 一、如图示进行点击,创建collection 二、输入对应的名称 三、创建Request并进行查…

Tomcat之虚拟主机

1.创建存放网页的目录 mkdir -p /web/{a,b} 2.添加jsp文件 vi /web/a/index.jsp <% page language"java" import"java.util.*" pageEncoding"UTF-8"%> <html> <head><title>JSP a page</title> </head> …

音视频色彩:RGB/YUV

目录 1.RGB 1.1介绍 1.2分类 1.2.1RGB16 1)RGB565 2)RGB555 1.2.2RGB24 1.2.3RGB222 2.YUV 2.1介绍 2.2分类 2.2.1 YUV444 2.2.2 YUV 422 2.2.3 YUV 420 2.3存储格式 2.3.1 YUYV 2.3.2 UYVY 2.3.3 YUV 422P 2.3.4 YUV420P/YUV420SP 2.3.5 YU12 和…

每日一题——LeetCode1422.分割字符串的最大得分

方法一 暴力枚举 枚举所有分割点的情况&#xff0c;取最大得分 var maxScore function(s) {let res 0;const n s.length;for (let i 1; i < n; i) {let score 0;for (let j 0; j < i; j) {if (s[j] 0) {score;}}for (let j i; j < n; j) {if (s[j] 1) {sco…

druid配置wall导致无法批量sql

1、现象 2、原配置 spring:autoconfigure:exclude: com.alibaba.druid.spring.boot.autoconfigure.DruidDataSourceAutoConfiguredatasource:druid:stat-view-servlet:enabled: trueloginUsername: ***loginPassword: ***allow:web-stat-filter:enabled: truefilter:wall:conf…

案例分享:频域与时域仿真的区别

从信号与系统理论中,可以知道,对于占空比为50%的周期信号,只含有奇次谐波,实际中,时钟信号并不是理想的占空比为50%的梯形波,因此,会同时含有奇偶次谐波,一个典型的案例,DDR仿真中,如果用模拟的理想激励源,如下图所示,可以发现,频谱中只会存在基频及其奇次谐波。 …

微软.NET6开发的C#特性——接口和属性

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;看到不少初学者在学习编程语言的过程中如此的痛苦&#xff0c;我决定做点什么&#xff0c;下面我就重点讲讲微软.NET6开发人员需要知道的C#特性&#xff0c;然后比较其他各种语言进行认识。 C#经历了多年发展…

【lesson47】进程通信之system V(共享内存)补充知识

文章目录 补充知识 补充知识 进行通信的key值问题&#xff0c;进程要通信的对方进程怎么能保证对方能看到&#xff0c;并且看到的就是该进程创建的共享内存的。 所以就通过key值来标识共享内存&#xff0c;key值是几不重要&#xff0c;只要在系统里是唯一的即可。 这样server和…

Vue CLI学习笔记

在看任何开源库的源码之前&#xff0c;必须先了解它有哪些功能&#xff0c;这样才能针对性地分模块阅读源码。 Vue CLI 简介 Vue CLI是Vue.js的官方命令行工具&#xff0c;它是一个基于Vue.js进行快速开发的完整系统。 通过Vue CLI&#xff0c;开发者可以快速搭建和开发Vue.js项…

python介绍,安装Cpython解释器,IDE工具pycharm的使用

python介绍 官方的Python解释器本质是基于C语言开发的一个软件&#xff0c;该软件的功能就是读取以py.结尾的文件内容&#xff0c;然后按照Guido定义好的语法和规则去翻译并执行相应的代码。这种C实现的解释器被称为Cpython。 python解释器的种类&#xff1a;Jython IPyth…

postgresql迁移到mysql

1.工具方法&#xff1a;Navicat Premium16 2. 手工方法&#xff1a; 迁移流程 下面是将 Postgresql 数据库迁移到 MySQL 的步骤流程&#xff1a; 步骤描述1. 创建MySQL表结构在MySQL中创建与Postgresql中的表结构相同的表2. 导出Postgresql数据将Postgresql中的数据导出为SQ…

【Qt Design】界面介绍

文章目录 前言Widget Box&#xff08;工具箱&#xff09;对象查看器Qt Design属性编译器sizePolicy内容 信号/槽编辑器资源浏览器ui文件编辑完窗口后查看代码在Pycharm中添加QtDesign 前言 Widget Box&#xff08;工具箱&#xff09; 提供很多控件 对象查看器 对象查看区域…

文献速递:肿瘤分割---- 弱监督肝肿瘤分割,使用Couinaud区段标注

文献速递&#xff1a;肿瘤分割---- 弱监督肝肿瘤分割&#xff0c;使用Couinaud区段标注 01 文献速递介绍 肝癌是世界上导致癌症死亡的主要原因之一&#xff0c;也是第二大常见的癌症死因。本稿件于2021年10月28日收到&#xff0c;2021年11月24日修订&#xff0c;2021年12月1…