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

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

第一种方式 （vite打包）

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

index.html引入文件路径

send_from_directory方法返回文件

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

  • 第二种方式 （pnpm打包）

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

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

修改前

修改后

m0_58167015
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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 build 后的目标文件夹部署在Flask服务器
qq_39670012的博客
07-22 782
将 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等后端服务里面，实现前后端不分离部署，解决空白页面和刷新页面not fount问题
02-07 1551
flask项目根目录要有templates文件夹和static文件夹，用于存储vue打包后的模板文件和静态文件。3.flask的模板文件放置。
web前端之vue动态访问静态资源、静态资源的动态访问、打包、public、import、URL、Vite
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
05-28 1539
web前端之vue动态访问静态资源、静态资源的动态访问、打包、public、import、URL、Vite
vue访问本地静态资源文件
陌桑楚客
09-29 6960
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...
Vue配置使用相对路径访问静态资源（js、css、images）
非真非假，非零非一
10-08 5492
Vue配置使用相对路径访问静态资源（js、css、images） 在vue项目的配置文件vue.config.js的配置文件中添加publicPath配置 module.exports = { ... publicPath: '' ... }
【springboot】【vue】【nginx】通过url访问文件（静态资源）
热门推荐
lorogy的博客
01-10 1万+
文件访问
vue项目的业务页面中访问static静态资源，点击下载时报未发现文件
Kratial的博客
04-21 2090
【代码】vue项目的业务页面中访问static静态资源，点击下载时报未发现文件。
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vue3+vite+antd 后台管理系统基础模板
02-06
它集成了Vue3的最新特性、Vite的高效开发环境以及Antd的UI组件，为开发者提供了一个稳定且高效的开发平台。 `.env.development` 和 `.env.production` 文件是用来配置不同环境下的变量，如API地址、环境标志等，...
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
Vue3+Vite+ElementPlus实战商城后台管理系统开发.zip
01-03
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
如何把打包的vue项目放到flask中：Flask init参数详解
Yonggie的博客
07-20 958
我的打包好的前端文件目录是文件，在下。 结果 raise TemplateNotFound(template) 结果是找不到静态文件，找到了template文件index.html，还行。 3 那么把静态文件的路径写上就搞定了 结果成功！
vue3+elementplus+flask 文件夹上传
guochunbiao0416的博客
10-10 1086
在子组件里先选择文件夹，然后在父组件里新建完成后调用。/* 隐藏原生文件选择按钮 */
【Vue+Flask】Vue获取本地静态资源（Json）的几种方式
yuelizhe4774的博客
08-10 2907
这种方法和上述方法差不多，都是一次加载文件，虽然之后我可以对数据进行更改，但是由于一次加载后，会将缓存文件存储在浏览器中，第二次调用还是第一次的文件。（通过对路由名称的定义可以解决这个问题，不过会有点麻烦）当然也有很多的解决办法（数据存在tomcat、配置其他环境等），但是，我已经要用Vue做前端，Flask做服务端，如果再使用别的，那不会变得更加麻烦吗。示例的路由结构式普通的，路由地址可以作为参数传递到下面的函数之中，通过这样的搭配，可以解决不同场景的需求，由于我觉得这样也挺麻烦的，所以想了第三种方法。.
vue2/3解决项目打包后本地图片等资源找不到的问题
weixin_68658847的博客
05-23 1786
vue2/3解决项目打包后本地图片等资源找不到的问题
Flask启动5000端口后关不掉了？
最新发布
svygh123的专栏
07-15 337
使用python app.py启动flask应用后，又启动了另一个flask测试应用，也能启动成功，也没有报设么端口冲突，关闭黑窗口后，访问还是有守护进程在运行，于是就想着用windows明令去杀掉进程。而且在任务管理器中是不存在这两个进程id的：4992、5728。查看5000对应的进程，是可以看到有的。使用命令：netstat -ano。运行taskkill杀进程命令。
vue3+vite+ts 静态图片处理
07-05
Vue3、Vite 和 TypeScript 的组合通常用于构建高性能的现代Web应用。对于静态图片处理，你可以采用以下步骤： 1. **安装依赖**: - 使用`npm`或`yarn`安装`vue.config.js`文件，以便配置Vite支持TypeScript：`npm install @vitejs/plugin-vue@next typescript` - 如果需要处理图片，安装一个图片处理库，如`sharp`（Node.js的高性能图像处理库），但在客户端运行Vite时，可能不会直接引入，因为Vite默认会打包到浏览器。 2. **配置Vite**: - 在`.viteignore`文件中忽略`node_modules`，防止打包过多不必要的体积。 - 更新`vite.config.ts`，添加TypeScript支持，配置Vite插件： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], build: { target: 'esnext', tsconfig: './tsconfig.build.json', // 根据项目需求配置正确的TS编译配置 }, }); ``` 3. **图片资源管理**: - 将图片放入`public`目录下，Vite会自动处理静态资产。 - 对于动态生成的图片（例如需要根据某些条件调整大小或添加水印），可以使用JavaScript (ES6+) 动态创建Image对象，或者在服务器端渲染时使用像`sharp`这样的库处理图片后再返回给前端。 4. **使用TypeScript**: - 引入图片处理模块时，确保正确导入并处理类型安全： ```typescript import sharp from 'sharp'; // 假设sharp是全局可用的，若不在Node环境则需引入库 async function resizeImage(src: string): Promise<Buffer> { const resized = await sharp(src) .resize(300, 200) // 设置新尺寸 .toBuffer(); // 转换为Buffer对象 return resized; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值