Vue3+Vite+Flask静态资源无法访问

最新推荐文章于 2024-05-28 19:58:09 发布
原创 最新推荐文章于 2024-05-28 19:58:09 发布 · 467 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flask #python #后端 #vue

本文详细介绍了在使用Vite和pnpm进行Flask项目打包时，如何配置静态资源文件夹、模板路径以及调整index.html中引入文件的方法。重点讨论了两种打包工具的不同操作步骤。

第一种方式 （vite打包）

首先指定静态资源文件夹和模板路径（app为根目录）

index.html引入文件路径

send_from_directory方法返回文件

static文件夹就是npm run build生成的dist改个名字放到flask目录下

  • 第二种方式 （pnpm打包）

首先指定静态目录和模板路径

修改index.html文件里的js、css文件引入的路径（修改template文件夹的index.html，代码中指定模板文件夹是template)

修改前

修改后

Flask静态文件访问问题解决方案
RfqrScheme的博客
09-17 1428
例如，如果你的CSS文件位于"static/css/styles.css"，那么在HTML模板中引用它的路径应该是"{{ url_for(‘static’, filename=‘css/styles.css’) }}"。通过配置静态文件夹、使用url_for函数、设置静态文件的路由、检查文件权限和使用调试模式，可以解决Flask无法访问静态文件的问题。确保在使用这些方法时，文件路径和文件夹结构设置正确，并且文件权限设置正确。在Flask中，可以使用内置的url_for函数生成静态文件的URL。
vue访问本地静态资源文件
陌桑楚客
09-29 7273
1、页面内 <ul class="xzlb"> <li v-for="(item,index) in manualList" :key="index" @click="downManual(item,index)"> <p>{{item.fileName}}</p> </li> </ul> export default { data() { return { man...
vuecli3打包发布后无法访问静态资源（404）
Tino's Space
09-29 1万+
场景 vuecli3或者vuecli4项目，本地运行可以正常访问静态资源，打包发布到线上后，通过域名访问后无法访问到静态资源，也就是404 原因分析 1.配置的映射域名并不是在根域名下，而是在次一级的location下，而publicPath配置的确实绝对路径"/" 关于publicPath的配置，vuecli官方给了详细的解决办法，即是把vue.config.js中的publicPath改成相对路径，网上大部分人都是这么说的，然儿并不能彻底解决这个问题。 https://cli.vuejs.org/zh/
Vue配置使用相对路径访问静态资源（js、css、images）
非真非假，非零非一
10-08 5847
Vue配置使用相对路径访问静态资源（js、css、images） 在vue项目的配置文件vue.config.js的配置文件中添加publicPath配置 module.exports = { ... publicPath: '' ... }
vue本地项目静态资源管理
u011927449的博客
05-23 376
vue本地项目静态资源管理 统一放在src/static里面css,images,js index.html里面使用重置样式 <link rel="stylesheet" href="static/css/reset.css"> 组件里面使用图片 <div><img src="/static/img/img1.jpg"></div> css使用背景图片 background: url(/static/img/img1.jpg) no-rep...
python flask+vue3+sqlite 前后端分离 简单个人博客网站项目源码
06-05
flask+vue3+sqlite 前后端分离 简单个人博客网站项目 Vue3采用新的组件式API开发，axios后端接口请求。 flask采用sqlalchemy管理数据库，采用token验证登陆信息。 已实现文章列表显示，文章内容markdown渲染，文章...
FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆
geinvse_seg的博客
02-26 4378
FLASK+VUE–前后端分离（一）- Flask基础讲解之路由、视图函数及代码实现 FLASK+VUE–前后端分离（二）- VUE基础安装及项目的简易介绍 FLASK+VUE–前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆 FLASK+VUE–前后端分离（四）- VUE+Element-UI简单搭建主页布局 FLASK+VUE–前后端分离（五）- VUE测试/线上/开发环境地址配置+拦截器+全局导航守卫+基础配置+获取设置cookie等系列 一、简单介绍所用到的基本库及安装配置
利用Vue3+TS+Vite+AcroDesign开发Web旅游应用教程
资源摘要信息:"使用Vue3+TS+Vite+AcroDesign技术栈来开发一款Web旅游应用master-travel.zip" 前端技术知识点： 1. HTML（HyperText Markup Language，超文本标记语言）：作为一种基础的网页结构定义语言，HTML使用...
使用Python技术栈写一个前后端分离的博客系统，前端使用VUE3+vite。后端使用fastAPI+sqlalchemy2.0。
最新发布
04-14
好的，用户想用Python技术栈构建一个前后端分离的博客系统，前端用Vue3+Vite，后端用FastAPI和SQLAlchemy 2.0。我需要根据提供的引用资料来给出指导。首先，我需要整理用户的需求，然后结合引用中的信息来分步骤解答...
Vue3+Flask项目在Ubuntu上通过Nginx部署并配置HTTPS
前端使用Vue3构建单页应用（SPA），通过webpack或Vite进行打包生成静态资源文件（HTML、CSS、JavaScript等），而后端采用Flask提供数据接口服务。这种架构虽然提升了开发效率和用户体验，但也带来了部署复杂性问题...
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【springboot】【vue】【nginx】通过url访问文件（静态资源）
热门推荐
lorogy的博客
01-10 1万+
文件访问
vue项目的业务页面中访问static静态资源，点击下载时报未发现文件
Kratial的博客
04-21 2348
【代码】vue项目的业务页面中访问static静态资源，点击下载时报未发现文件。
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
Lea_HQ的博客
12-17 2889
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
Web前端之Vue动态访问静态资源、静态资源的动态访问、打包、public、import、Vite、URL
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
05-28 2665
Web前端之Vue动态访问静态资源、静态资源的动态访问、打包、public、import、Vite、URL
Flask无法加载JavaScript和CSS文件
HkPostscript的博客
09-17 1044
在Flask中，静态文件（例如JavaScript和CSS）应该存放在一个专门的目录中，并通过配置告知Flask如何找到这些文件。确保你的静态文件存放在正确的位置，并且目录名为"static"。如果你在Flask应用程序中使用了蓝图（Blueprint），那么在蓝图中加载静态文件的方式与在应用程序中加载略有不同。确保你在蓝图和应用程序中正确配置静态文件的目录和URL前缀，以便Flask能够正确加载JavaScript和CSS文件。在蓝图中使用静态文件时，需要使用蓝图的名称作为前缀来生成正确的URL。
vue项目打包部署到flask等后端服务里面，实现前后端不分离部署，解决空白页面和刷新页面not fount问题
02-07 2255
flask项目根目录要有templates文件夹和static文件夹，用于存储vue打包后的模板文件和静态文件。3.flask的模板文件放置。
vue build 后的目标文件夹部署在Flask服务器
qq_39670012的博客
07-22 930
将 vue build 后的目标文件夹部署在Flask 服务器后，完美解决，因为这个场景不常见，所以记录一下: from flask import Flask, Blueprint, render_template, abort from flask import jsonify from flask_cors import CORS # 关键是 这两个初始化参数 template_folder static_folder # 配置好后，vue项目内的配置都不用改了 app = Flask(__na
如何把打包的vue项目放到flask中：Flask init参数详解
Yonggie的博客
07-20 1580
我的打包好的前端文件目录是文件，在下。 结果 raise TemplateNotFound(template) 结果是找不到静态文件，找到了template文件index.html，还行。 3 那么把静态文件的路径写上就搞定了 结果成功！
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值