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

小袁同学.

已于 2024-02-26 23:59:41 修改

阅读量615

点赞数 10

分类专栏：前后端学习日记小袁同学3k5的工作日常文章标签： vue.js fastapi 前端

于 2024-02-26 23:49:48 首次发布

本文链接：https://blog.csdn.net/obliv/article/details/136311242

版权

30 篇文章 56 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

正常创建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中

在这个路径那加上静态文件的文件夹名称，加完之后的如下图

然后再运行项目

就可以访问地址正常使用了

关注