Vite打包项目后图片丢失的简单解决方法
更新时间：2023年05月18日 09:56:49 作者：never debug
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的情况,下面这篇文章主要给大家介绍了关于Vite打包项目后图片丢失的简单解决方法,需要的朋友可以参考下
1.打包时出现的问题
在使用Vite脚手架开发项目时，打包后的项目会出现图片、图标等静态资源丢失问题。比如下面：
我的图片资源全在src/assets/img目录中，但是经过打包后img文件夹并没有出现在打包后的项目（dist文件夹）当中，这样会导致项目部署后找不到资源等一系列的问题。
2.解决方法
方法1：
Vite官网地址：https://cn.vitejs.dev/guide/assets.html#importing-asset-as-url
在需要的使用图标的地方去引入，比如：
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrlimgUrl在开发时会是/img.png，在生产构建后会是 /assets/img.2d8efhg.png。这种方法有一个缺点，当图片资源特别多时会很麻烦，需要先创建一个脚本，将所有需要的资源引入进来，然后以数组的形式导出，最后再通过遍历的形式去使用。（该方法没试过，但似乎应该差不了多少，哈哈哈哈）。
方法2：
方法2是官网中说的第二种方法，将所有静态资源放到public目录当中，然后打包时会将这些资源一同打包进去，如下面图片所示：
我的图片都在public/img目录当中，打包后会将img文件夹一同打包进项目，如dist文件夹中所示。
官网我只是看了一个大概，总结出这两种方法，如果大佬们不喜欢用可以自己研究一下，然后大家一起分享吧，哈哈哈哈！
总结
到此这篇关于Vite打包项目后图片丢失的简单解决方法的文章就介绍到这了,更多相关Vite打包项目后图片丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决Vue中 父子传值 数据丢失问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了Vue中inheritAttrs的使用实例详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
本篇文章主要介绍了详解Vue 非父子组件通信方法（非Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
vue插件--仿微信小程序showModel实现模态提示窗功能
这篇文章主要介绍了vue插件--仿微信小程序showModel实现模态提示窗,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
这篇文章主要介绍了vue2.0中组件传值的几种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue中computed顺序、watch顺序、响应次数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家介绍了vue3 emits事件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了vue实现点击当前标签高亮效果的思路详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-06-06
这篇文章主要介绍了Vue 实现简易多行滚动“弹幕”效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了vue axios接口请求封装方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论