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

最新推荐文章于 2024-05-28 19:58:09 发布
最新推荐文章于 2024-05-28 19:58:09 发布
阅读量422 收藏 1
点赞数 4
CC 4.0 BY-SA版权
文章标签： flask python 后端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_58167015/article/details/137125346
本文详细介绍了在使用Vite和pnpm进行Flask项目打包时，如何配置静态资源文件夹、模板路径以及调整index.html中引入文件的方法。重点讨论了两种打包工具的不同操作步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一种方式 （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 1340
例如，如果你的CSS文件位于"static/css/styles.css"，那么在HTML模板中引用它的路径应该是"{{ url_for(‘static’, filename=‘css/styles.css’) }}"。通过配置静态文件夹、使用url_for函数、设置静态文件的路由、检查文件权限和使用调试模式，可以解决Flask无法访问静态文件的问题。确保在使用这些方法时，文件路径和文件夹结构设置正确，并且文件权限设置正确。在Flask中，可以使用内置的url_for函数生成静态文件的URL。
Flask无法加载JavaScript和CSS文件
HkPostscript的博客
09-17 912
在Flask中，静态文件（例如JavaScript和CSS）应该存放在一个专门的目录中，并通过配置告知Flask如何找到这些文件。确保你的静态文件存放在正确的位置，并且目录名为"static"。如果你在Flask应用程序中使用了蓝图（Blueprint），那么在蓝图中加载静态文件的方式与在应用程序中加载略有不同。确保你在蓝图和应用程序中正确配置静态文件的目录和URL前缀，以便Flask能够正确加载JavaScript和CSS文件。在蓝图中使用静态文件时，需要使用蓝图的名称作为前缀来生成正确的URL。
vue访问本地静态资源文件
陌桑楚客
09-29 7228
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 5805
Vue配置使用相对路径访问静态资源（js、css、images） 在vue项目的配置文件vue.config.js的配置文件中添加publicPath配置 module.exports = { ... publicPath: '' ... }
vue本地项目静态资源管理
u011927449的博客
05-23 352
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渲染，文章...
vue2+vite环境搭建
Blue_Arc的博客
05-13 2761
Vue2 Vue2为开发主流，而vite为新一代打包工具，采用vue2 + vite构建 项目初始化 npm create vite@latest 此时会提示你安装最新的vite，技术栈选择vue，会默认下载最新版vue3 输入项目名称，例如demo，会自动生成相应名称文件夹 cd demo npm i 删除原有的vue3依赖 npm uninstall @vitejs/plugin-vue -D 安装vite-plugin-vue2依赖 npm i vite-plugin-vue2 -D 修改vu
FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆
geinvse_seg的博客
02-26 4281
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使用...
flask vue在同一服务器的解决方案
helixsky的博客
06-09 1073
1、正常安装vue/router/cli等 2、修改frontend/src/router/index.js路由，引入新组件： import Vue from 'vue' import Router from 'vue-router' const routerOptions = [ { path: '/', component: 'Home' }, { path: '/about', com...
【springboot】【vue】【nginx】通过url访问文件（静态资源）
热门推荐
lorogy的博客
01-10 1万+
文件访问
vue项目的业务页面中访问static静态资源，点击下载时报未发现文件
Kratial的博客
04-21 2309
【代码】vue项目的业务页面中访问static静态资源，点击下载时报未发现文件。
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
Lea_HQ的博客
12-17 2456
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
Web前端之Vue动态访问静态资源、静态资源的动态访问、打包、public、import、Vite、URL
最新发布
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
05-28 2503
Web前端之Vue动态访问静态资源、静态资源的动态访问、打包、public、import、Vite、URL
vue项目打包部署到flask等后端服务里面，实现前后端不分离部署，解决空白页面和刷新页面not fount问题
02-07 2066
flask项目根目录要有templates文件夹和static文件夹，用于存储vue打包后的模板文件和静态文件。3.flask的模板文件放置。
如何把打包的vue项目放到flask中：Flask init参数详解
Yonggie的博客
07-20 1434
我的打包好的前端文件目录是文件，在下。 结果 raise TemplateNotFound(template) 结果是找不到静态文件，找到了template文件index.html，还行。 3 那么把静态文件的路径写上就搞定了 结果成功！
vue build 后的目标文件夹部署在Flask服务器
qq_39670012的博客
07-22 899
将 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+mysql+flask
效率开发者手札
03-23 2009
vue+mysql+flask 前后端分离项目部署
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值