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.hqwc.cn/news/457911.html

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

相关文章

《PCI Express体系结构导读》随记 —— 第II篇 第4章 PCIe总线概述(9)

接前一篇文章:《PCI Express体系结构导读》随记 —— 第II篇 第4章 PCIe总线概述(8) 4.2 PCIe体系结构的组成部件 PCIe总线作为处理器系统的局部总线,其作用与PCI总线类似,主要目的是为了连接处理器系统中的外部设备&…

理想汽车学华为,年终奖红包有点大(含算法原题)

理想年终奖红包 2月5日,有微博用户发帖称,脉脉上看到,今年理想汽车的年终奖红包有点大。 对此,李想转发并评论: ❝ 不能只学华为的流程,而不学华为的利益分配。奖罚不分明,是组织低效的最大原因…

TOML格式配置的frp服务搭建

从frp v0.52.0 版本开始,frp 将TOML作为配置文件格式。INI 格式已被弃用,并将在未来的发布中移除。因此,frp v0.52.0 及更高版本的配置文件默认为TOML格式。 项目地址 GitHub:https://github.com/fatedier/frp/releases 服务端…

第十五篇【传奇开心果系列】Python的OpenCV库技术点案例示例:图像配准

传奇开心果短博文系列 系列短博文目录Python的OpenCV库技术点案例示例系列短博文目录前言一、常见的图像配准任务介绍二、图像配准任务:图像拼接介绍和示例代码三、图像配准任务:图像校正介绍和示例代码四、图像配准任务:图像配准介绍和示例代码五、基于特征点的配准方法介绍…

Mac电脑删除第三方软件的最简单方法(2024最新教程)

Mac用户经常会下载各种第三方软件来提高工作效率或娱乐体验。然而,随着时间的推移,一些软件可能不再需要,或者用户可能想要清理空间。在这种情况下,有效地删除这些第三方软件变得尤为重要。本文将介绍几种常规的Mac删除第三方软件…

蓝桥杯省赛无忧 课件92 行列式

01 什么是行列式 02 行列式的性质 03 高斯消元求行列式

Python进阶--爬取下载人生格言(基于格言网的Python3爬虫)

目录 一、此处需要安装第三方库: 二、抓包分析及Python代码 1、打开人生格言网(人生格言-人生格言大全_格言网)进行抓包分析 2、请求模块的代码 3、抓包分析人生格言界面 4、获取各种类型的人生格言链接 5、获取下一页的链接 6、获取人生格言的…

[HCIE]防火墙基础配置

实验目的:1.允许主机 ping FW的物理接口; 2.允许FW访问trust区域的主机; 3.允许trust主机访问其他所有区域。 配置步骤: 1.配置所有接口地址(略) 2.将防火墙接口加入到各自的区域 firewall zone trust …

社交媒体教育:Facebook在数字时代的社交学习

随着数字时代的到来,社交媒体已经深刻地改变了我们获取信息、进行交流的方式,同时也在教育领域崭露头角。作为全球最大的社交媒体平台之一,Facebook在数字时代发挥着越来越重要的社交学习作用。本文将深入探讨Facebook在教育领域的角色&#…

正点原子--STM32通用定时器学习笔记(2)

1. 通用定时器输入捕获部分框图介绍 捕获/比较通道的输入部分(通道1) 输入通道映射CC1S[1:0]→采样频率CKD[1:0]→滤波方式IC1F[3:0]→边沿检测方式CC1P→捕获分频ICPS[1:0]→使能捕获CC1E 输入部分对相应的TIx输入信号采样,并产生一个滤波后…

(篇十)MySQL内置函数续

目录 🏀控制流函数 ⚽计算各个职位的年薪,如果是董事长按照15薪算,总经理13薪,其余都为12薪 ⚽计算所有职位提成之和 🏀窗口函数(基础) ⚽查询2019年每月支付总额和当年累计支付总额 ⚽查…

【Linux取经路】探寻shell的实现原理

文章目录 一、打印命令行提示符二、读取键盘输入的指令三、指令切割四、普通命令的执行五、内建指令执行5.1 cd指令5.2 export指令5.3 echo指令 六、结语 一、打印命令行提示符 const char* getusername() // 获取用户名 {return getenv("USER"); }const char* geth…