vue项目build 静态文件部署到fastapi后台中访问白屏,访问不到?

正常创建VUE项目那些应该都会,到项目最后

npm run build

然后会生成一个dist文件夹
在这里插入图片描述
然后把这个文件夹的东西复制去到fastapi项目根目录创建一个static文件夹
在这里插入图片描述
然后开始写点代码

# main.py绑定静态文件目录
app.mount("/static", StaticFiles(directory="static"), name="static")

然后根目录或者访问的主页目录搞上这样的一个路由和引入starlette库,我这个是pycharm创建的自动引入的

在这里插入图片描述

重点:这个路由是通匹配的,也就是访问vue路由的时候会从后端路由从前向后找,所以这个放在所有的fastapi的路由的最后面
如果你分不清自己的路由哪个先后,或者分应用引用路由的话,就放在main最开始引用路由的地方,如下图
在这里插入图片描述

然后运行项目,会发现页面是白屏
pycharm中会显示两个404的css和js文件找不到
在这里插入图片描述
现在去static下的index.html中
在这里插入图片描述
在这个路径那加上静态文件的文件夹名称,加完之后的如下图
在这里插入图片描述
然后再运行项目
在这里插入图片描述
就可以访问地址正常使用了

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

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

相关文章

[算法沉淀记录] 排序算法 —— 堆排序

排序算法 —— 堆排序 算法基础介绍 堆排序(Heap Sort)是一种基于比较的排序算法,它利用堆这种数据结构来实现排序。堆是一种特殊的完全二叉树,其中每个节点的值都必须大于或等于(最大堆)或小于或等于&am…

goland配置新增文件头

参考: goland函数注释生成插件 goland函数注释生成插件_goland自动加函数说明-CSDN博客 GoLand 快速添加方法注释 GoLand 快速添加方法注释_goland批量注释-CSDN博客 goland 如何设置头注释,自定义author和data goland 如何设置头注释,自定…

【踩坑】修复xrdp无法关闭Authentication Required验证窗口

转载请注明出处:小锋学长生活大爆炸[xfxuezhang.cn] 问题如下,时不时出现,有时还怎么都关不掉,很烦: 解决方法一:命令行输入 dbus-send --typemethod_call --destorg.gnome.Shell /org/gnome/Shell org.gn…

【web APIs】1、(学习笔记)有案例!

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、概念二、使用步骤1.获取DOM对象2.操作元素内容3.属性修改3.1.常用属性修改3.2.控制样式属性3.3.操作类名(className) 操作CSS3.4.操作表单元素属性3.5.自定…

Mycat核心教程--ZooKeeper集群搭建【三】

Mycat核心教程--ZooKeeper集群搭建 八、 ZooKeeper集群搭建8.1.ZooKeeper简介8.2.数据复制的好处8.3.Zookeeper设计目的8.4.zookeeper集群包括3种角色8.4.1.Leader角色8.4.2.Follower 角色8.4.3.Observer 角色 8.5.zookeeper集群工作流程8.6.zookeeper集群节点数量为奇数&#…

如何选择适合的工具,将由图片合成的PDF转为Excel?

在数字化时代,PDF文件已经成为我们日常工作中不可或缺的一部分。然而,有时候我们需要将这些PDF文件中的图片转换成Excel格式,以便进行进一步的数据分析和处理。这时,选择一款适合的由图片组成的PDF转Excel工具就显得尤为重要。本文…

mysql order by布尔盲注

什么是order by 在MySQL支持使用ORDER BY语句对查询结果集进行排序处理,使用ORDER BY语句不仅支持对单列数据的排序,还支持对数据表中多列数据的排序。语法格式如下 select * from 表名 order by 列名(或者数字) asc;升序(默认升序) selec…

东莞IBM服务器维修之IBM x3630 M4阵列恢复

记录东莞某抖音电商公司送修一台IBM SYSTEM X3630 M4文档服务器RAID6故障导致数据丢失的恢复案例 时间:2024年02月20日, 服务器品牌:IBM System x3630 M4,阵列卡用的是DELL PERC H730P 服务器用途和用户位置:某抖音电…

深度学习目标检测】二十、基于深度学习的雾天行人车辆检测系统-含数据集、GUI和源码(python,yolov8)

雾天车辆行人检测在多种场景中扮演着至关重要的角色。以下是其作用的几个主要方面: 安全性提升:雾天能见度低,视线受阻,这使得驾驶者和行人在道路上的感知能力大大降低。通过车辆行人检测技术,可以在雾天条件下及时发现…

GEE数据集——全球 30 米不透水表面动态数据集 (GISD30)

全球 30 米不透水表面动态数据集 (GISD30) 全球 30 米不透水表面动态数据集 (GISD30) 为了解 1985 年至 2020 年全球不断变化的不透水表面景观提供了宝贵的资源。该数据集在城市可持续发展、人为碳排放评估和全球生态环境建模等领域具有深远的科学意义和实际应用价值。GISD30 是…

高数考研 -- 公式总结(更新中)

1. 两个重要极限 (1) lim ⁡ x → 0 sin ⁡ x x 1 \lim _{x \rightarrow 0} \frac{\sin x}{x}1 limx→0​xsinx​1, 推广形式 lim ⁡ f ( x ) → 0 sin ⁡ f ( x ) f ( x ) 1 \lim _{f(x) \rightarrow 0} \frac{\sin f(x)}{f(x)}1 limf(x)→0​f(x)sinf(x)​1. (2) lim ⁡…

ABAP 发送带EXCEL邮件

前言 没啥特殊需求,就是有个库龄报表用户想整邮件发送 实现 用的最简单的XLS文件作为excel附件发送出去 观察XLS文件的纯文本格式,每列之间用TAB制表符分隔,每行之间用回车符分隔 思路也比较明确,在SAP中实现这种格式&#xf…

命名元组(python)

命名元组与元组的差异,命名元组和字典,哪个效率更高。 (笔记模板由python脚本于2024年02月26日 12:31:36创建,本篇笔记适合熟悉python元组和字典的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网:https://www.python.org/ F…

面试redis篇-13Redis为什么那么快

Redis是纯内存操作,执行速度非常快采用单线程,避免不必要的上下文切换可竞争条件,多线程还要考虑线程安全问题使用I/O多路复用模型,非阻塞IOI/O多路复用模型 Redis是纯内存操作,执行速度非常快,它的性能瓶颈是网络延迟而不是执行速度, I/O多路复用模型主要就是实现了高效…

Lua速成(2)

一、流程控制 Lua 编程语言流程控制语句通过程序设定一个或多个条件语句来设定。在条件为 true 时执行指定程序代码,在条件为 false 时执行其他指定代码。 控制结构的条件表达式结果可以是任何值,Lua认为false和nil为假,true和非nil为真。 …

C++ list详解以及模拟实现

目录 1.list的使用 1.1list的定义 1.2list的使用 1.3list iterator使用 1.4list capacity 1.5list element access 1.6list增删查改 2.list迭代器失效问题 3.list的模拟实现 1.list的使用 1.1list的定义 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容…

探索便捷办公新选择:ONLYOFFICE 桌面编辑器

目录 引言 1. ONLYOFFICE 桌面编辑器简介 2. 功能特点 2.1 多格式支持 2.2 实时协作编辑 2.3 兼容性与格式保持 2.4 丰富的编辑功能 3. 使用方法 3.1 下载安装 3.2 打开文档 3.3 编辑文档 3.4 保存和共享 4. 注意事项 4.1 版本更新 4.2 网络连接 4.3 安全性 5.…

matlab 方向向量约束的PCA快速粗配准

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的GPT爬虫。 一、算法原理 该方法由本人原创,目前尚未见有相关论文用到。具体原理看代码即可。 二、代码实现 clc;clear; %% ------…

rtthread stm32h743的使用(一)新工程建立

我们要在rtthread studio 开发环境中建立stm32h743xih6芯片的工程。我们使用一块stm32h743及fpga的核心板完成相关实验,核心板如图: 1.打开rtthread studio填写芯片型号及调试口,我们的调试串口为USART1_PA9,PA10。 2.编译新工程并且下载 …