vue3+vite打包后静态资源不显示

最新推荐文章于 2024-04-07 19:12:09 发布
最新推荐文章于 2024-04-07 19:12:09 发布
阅读量5.7k 收藏 6
点赞数 1
分类专栏： 学习笔记 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mjxiaomihu/article/details/128552151
版权

vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题。

vite官方文档的解释：
https://vitejs.bootcss.com/guide/assets.html

这里我采用的是将静态资源放在public文件中，如下下是官方文档介绍

 要注意的是路径中要去掉public

这样打包后就解决了图片不显示的问题 

小迷糊MJ
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vite-plugin-assets-uploader:帮助您将Vite的打包资产上载到服务器
04-01
vite-plugin-assets-uploader 帮助您将Vite的打包资产上载到服务器 安装 yarn add vite-plugin-assets-uploader --dev 例子 import { defineConfig } from "vite" ; import uploader from "vite-plugin-assets-uploader" ; // https://vitejs.dev/config/ export default defineConfig ( { plugins : [ uploader ( { enableAlioss : true , ossOptions : { bucket : "xxx" , accessKeyId : "xxxx" , acces
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
热门推荐
LoveSummer
07-21 6万+
vite官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题我们看到实际上我们不希望资源文件被wbpack编译，这点跟webpack是一致的我们的目标静态文件在。......
vite项目打包资源分配目录
最新发布
wuyixiangt的博客
04-07 344
vite项目打包后所有资源都放在了assets文件夹中，像传统工程一样分为不同的文件夹，js放js文件夹，css放css文件夹，图片放img文件夹。Rollup会深度影响打包结果，如何在vite里面配置Rollup，Rollup相关配置。vite无论是当做是脚手架还是构建工具，内部实现原理就是Rollup和esbuild。vite项目打包资源分配目录。
解决vue+webpack打包路径的问题
11-27
最近写了一个vue小项目，不想单独作为一个web项目发布，所以就准备放到资源项目的public文件夹下，遇到一些小问题，在此总结一下。 资源路径如下： public目录配置的访问路径为”/”，在这样的情况下，我们的访问路径就变成了”域名/vue-demo”。访问的时候发下程序未报错，但是页面一片空白。此前也这样发布的项目都没有问题，但这次是怎么回事呢？ 仔细探索后发现是vue-router搞得鬼。因项目需要，所以使用了滚动行为，滚动行为必须开启history模式，在vue-router官方文档中有这么一句话： 当你使用 history 模式时，URL 就像正常的 url，例如 http:/
vue打包后显示空白正确处理方法
08-28
很多朋友遇到这样的问题当vue打包后显示空白问题，遇到这样的问题怎么处理呢？下面脚本之家小编给大家分享下vue打包后显示空白正确处理方法，感兴趣的朋友一起看看吧
vite+vue3项目打包后图片不显示或者请求路径多了一个undefined
lotpyve的博客
01-24 710
这里表示我们的 .env.development 文件，在打包的时候是不会被构建进去的，所以当我们打包后，.env.development 里面用到的路径就出错了。但是如果我们是把项目打包，然后在掉到 express 服务器里面去时，我们会发现，只显示了一张图片，另外一张图片的地址前面是 undefined。我们先来看一个简单的例子，我已经事先在本地构建了一个 express 服务器，端口是 3000，images 里面是有文件资源的，这是代码。
解决vue打包之后静态资源图片失效的问题
11-27
1、问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！ 2、解决方法之一 静态资源static存放位置放在src目录下   你可能会问为什么放在src目录下？放在跟src同级目录下不可以吗？好吧，一开始我也是放在src同级目录下，但是在某个css文件中引入背景图片的时候打包之后图片失效，我是这样引入的   实践证
Vite打包静态资源无法加载问题
weixin_48328458的博客
03-28 1781
问题：本地npm run dev正常，build 之后preview和部署到github pages之后Failed to load resource:404。场景：开发前期使用静态资源作假数据，含嵌套父子组件传值。这部分尝试用引入方法时也出现加载不出来但不报错的情况。1.页面需要直接显示的部分尽量用标签直接引入。2. 文件中各处使用引入的方式使用。项目：Vue3 + Vite。
VUE 打包后访问index.html空白页面问题和找不到静态文件问题
qq_42164957的博客
01-14 1069
背景：vue项目，打包后生成的dist下index.html文件打开报错问题！ 错误1：显示无访问文件 错误原因： router路由在history模式打包后出现空白页面的情况,而且没有资源加载错误的报错信息 解决办法：在 router/index.js 文件中定义 const router = new VueRouter({ //mode: 'history',//屏蔽或删除，默认 hash 模式 base: process.env...
vue打包后静态资源或图片无法访问,vue打包后html一片空白
khbilhjknkjb的博客
09-15 1715
@[TOC](vue打包后静态资源或图片无法访问,vue打包后html一片空白 1.更改配置文件资源路径 2.将所有的.jpeg类型的图片改成png或者jpg 希望对你有所帮助
vue项目打包上传后报404找不到静态文件
weixin_50684180的博客
03-30 2798
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、vue项目打包上传后报404找不到静态文件二、解决办法 一、vue项目打包上传后报404找不到静态文件 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、解决办法 在项目入口文件vue.config.js写上配置文件 ...
解决vue项目 build之后资源文件找不到的问题
10-14
主要介绍了解决vue项目 build之后资源文件找不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？ 我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现 图片路径出错啦！！！ 解决方法： 1.先找到config下的index.js文件 把最后的’/’ 改为 ‘./’ 2.接着把图片地址改为 以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
vue cli3.0打包上线静态资源找不到路径的解决操作
10-15
主要介绍了vue cli3.0打包上线静态资源找不到路径的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue静态资源打包中的坑与解决方案
11-28
①.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; ②.静态资源打包使用相对路径后css文件引入大图片路径错误问题。 1、问题 vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后...
vue3-falsework:一个 Vue3.0 + vite2 的快速开发脚手架
04-11
vue3-falsework 一个基于 vite2 生成的 vue3.0 模板项目，无 TypeScript，非 PWA。 快速开始 确保 Node 版本 => 12 yarn && yarn start 生产环境编译 yarn build 打包后本地预览 yarn serve 如何开发 1. 如何新增...
vue3+ts+less+vite+pinia+axios基础封装项目模版
03-26
它基于原生ESM提供极速的冷启动，并且不需要打包，提供快速的HMR开发体验。Vite通过原生ESM提供丰富的特性，如快速的热重载、按需编译和优化的构建输出。 Pinia Pinia是Vue.js的状态管理库，是Vuex的轻量级替代方案...
Vue 打包的静态文件不能直接运行的原因及解决办法
01-22
吾辈使用 vue-cli 直接生成的 vue 模板项目，在模板之上继续开发的。然而在使用 npm run build 打包项目时，却发现打包好的项目在浏览器中直接打开好像什么都没有？ 原因 查看了一下打包后的 index.html 源码，终于...
vue webpack打包后图片、js、css路径错误的完美解决方法
weixin_56242672的博客
07-27 4392
项目用rundevbuild打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。
vue3 vite打包找不到静态资源
05-01
vue3 vite 是一个快速开发工具，会自动完成静态资源的导入和打包，但有时候出现找不到静态资源的问题。 这个问题的可能原因包括以下几个方面： 1. 路径问题。在使用import导入静态资源时，需要保证路径正确。可以确保路径正确的方法有：使用绝对路径；使用@表示项目根目录；使用别名；使用相对路径等。 2. 配置问题。可能是配置了错误的路径，导致找不到静态资源。可以先检查配置相关的部分，如webpack配置、vite配置等等。 3. 服务器问题。有时候在构建完成后，静态资源并没有正确放置到服务器上。这种情况可以重新部署服务器后再次尝试。 4. 打包问题。有时候在打包阶段，静态资源没有被正确打包到最终的文件中。可以尝试重新打包并检查打包输出结果。 综上所述，找不到静态资源可能的原因有很多，需要针对具体情况逐一排查。可以通过检查路径、配置、服务器和打包等方面来确定问题的原因，并逐步解决。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值