vue项目打包部署到flask等后端服务里面,实现前后端不分离部署,解决空白页面和刷新页面not fount问题

news2024/11/15 8:23:27

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)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

解决CORS错误(Spring Boot)

记录一下错误,以博客的形式 前言 跨域(Cross-Origin)是指在Web开发中,当一个Web应用试图从一个源(域名、协议、端口组合)获取资源时,该请求的目标与当前页面的源不同。具体来说,当一…

Docker容器监控-CIG

目录 一、CIG说明 1. CAdvisor 2. InfluxDB 3. Grafana 二、环境搭建 1. 创建目录 2. 编写 docker-compose.yml 3. 检查并运行容器 三、进行测试 1. 查看 influxdb 存储服务 是否能正常访问 2. 查看 cAdvisor 收集服务能否正常访问 3. 查看 grafana 展现服务&#…

Alt + TAB 禁止在 Edge 标签页之间切换

(原文:https://blog.iyatt.com/?p13587 ) 浏览器标签页之间切换可以用 {Ctrl}{Tab} 或者 {Ctrl}{数字}精准到标签页码,结果 Windows 11 默认把 Edge 标签页切换混入了 {Alt}{Tab} 前台应用窗口切换,经常不注意是在 Ed…

2.8作业

程序代码&#xff1a; CCgcc EXEhello OBJS$(patsubst %.c,%.o,$(wildcard *.c)) CFLAGS-c -oall:$(EXE)$(EXE):$(OBJS)$(CC) $^ -o $%.o:%.c$(CC) $(CFLAGS) $ $^.PHONY:cleanclean:rm $(OBJS) $(EXE) 程序代码&#xff1a; #include<stdio.h> #include<string.h&…

跨境电商新风潮:充分发挥海外云手机的威力

在互联网行业迅速发展的大环境下&#xff0c;跨境电商、海外社交媒体营销以及游戏产业等重要领域都越来越需要借助海外云手机的协助。 特别是在蓬勃发展的跨境电商领域&#xff0c;像亚马逊、速卖通、eBay等平台&#xff0c;结合社交电商营销和短视频内容成为最有效的流量来源。…

什么是美颜SDK?直播美颜SDK的技术原理与应用

当下&#xff0c;美颜SDK的崛起成为了直播美颜的关键推动力。今天&#xff0c;小编将为大家讲解美颜SDK的概念、技术原理以及在直播应用中的广泛应用。 一、什么是美颜SDK&#xff1f; 美颜SDK是一种软件开发工具包&#xff0c;旨在为应用开发者提供一整套美颜算法和功能&…

Sklearn、TensorFlow 与 Keras 机器学习实用指南第三版(八)

原文&#xff1a;Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第十八章&#xff1a;强化学习 强化学习&#xff08;RL&#xff09;是当今最激动人心的机器学习领域之一&#xff0c;也是最古老…

完全背包理论基础 C++力扣题目518--零钱兑换II

动态规划&#xff1a;完全背包理论基础 本题力扣上没有原题&#xff0c;大家可以去卡码网第52题 (opens new window) #思路 #完全背包 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品都有无限个&#xff0…

【MySQL】学习和总结DCL的权限控制

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-Bl9kYeLf8GfpdQgL {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

《动手学深度学习(PyTorch版)》笔记7.2

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过&…

深度学习中常用激活函数介绍

深度学习中常用激活函数介绍 在深度学习中&#xff0c;激活函数的作用主要是引入非线性特性&#xff0c;提高模型的表达能力。具体如下&#xff1a; 解决线性不可分问题&#xff1a;激活函数可以将输入特征的复杂度提升&#xff0c;使得神经网络能够处理非线性问题&#xff0c…

OpenAI推出ChatGPT已经过去一年多了,AI 取代了内容创作者吗

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【Python基础】案例分析:GDP分析

GDP分析 文章目录 GDP分析1 分析过程与目标1.1 数据来源1.2 熟悉数据 2 各国与地区GDP数据分析关系多源组成2.2 清洗数据2.3 设定分析目标 3 主要国家DGP分析3.1 主要国家GDP趋势3.2 1990年开始GDP对比 4 中国GDP分析4.1 从1990年开始GDP变化化4.2 中国GDP分析增长超过10%的年份…

C# 使用 MailKit 发送邮件(附demo)

C# 使用 MailKit 发送邮件&#xff08;附demo&#xff09; 介绍安装包&#xff08;依赖&#xff09;案例简单代码属性介绍&#xff1a;MailboxAddress属性介绍&#xff1a;BodyBuilderSMTP 服务器端口SSL的案例&#xff1a;非SSL&#xff1a; 介绍一下SMTP 介绍 MailKit 是一…

【力扣】盛最多水的容器,双指针法

盛最多水的容器原题地址 方法一&#xff1a;双指针 如果使用暴力枚举&#xff0c;时间复杂度为 &#xff0c;效率太低&#xff0c;会超时。 考虑使用双指针&#xff0c;利用单调性求解。用 left 和 right 作为数组 height 的下标&#xff0c;分别初始化为 0 和 size-1 。考…

容器库(6)-std::set

std::set是以key为元素的关联容器&#xff0c;容器中的key是唯一的且按顺序排列的。搜索、移除和插入的时间复杂度是 。底层通常是以红黑树实现的。 template<class Key,class Compare std::less<Key>,class Allocator std::allocator<Key> > class set; …

华为配置内部人员接入WLAN网络示例(802.1X认证)

配置内部人员接入WLAN网络示例&#xff08;802.1X认证&#xff09; 组网图形 图1 配置802.1X认证组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 用户接入WLAN网络&#xff0c;使用802.1X客户端进行认证&#xff0c;输入正确的用户名和密…

背包问题(01背包、完全背包、多重背包)详解(超详细!!!),及题目代码和题意,包含6个例题。

第一题&#xff1a;01背包问题 01背包问题 时间限制&#xff1a;1秒 内存限制&#xff1a;128M 题目描述 一个旅行者有一个最多能装 M 公斤的背包&#xff0c;现在有 n 件物品&#xff0c;它们的重量分别是 W1&#xff0c;W2&#xff0c;...,Wn ,它们的价值分别为 C1…

Netty的常用组件及线程模型设计(一)

Netty常用组件 Bootstrap Bootstrap是Netty框架的启动类和主入口类&#xff0c;发呢为客户端类Bootstrap和服务器类ServerBootstrap两种 Channel Channel是JavaNIO的一个基本构造&#xff0c;它代表一个到实体(如一个硬件设备、一个文件、一个网络套接字或者一个能够执行一…

电缆线的阻抗50Ω,真正含义是什么?

当我们提到电缆线的阻抗时&#xff0c;它到底是什么意思&#xff1f;RG58电缆通常指的是50Ω的电缆线。它的真正含义是什么&#xff1f;假如取一段3英尺(0.9144米)长的RG58电缆线&#xff0c;并且在前端测量信号路径与返回路径之间的阻抗。那么测得的阻抗是多少&#xff1f;当然…