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-grid-layout是一个vue栅格拖动布局的组件,下面这篇文章主要给大家介绍了关于前端开发指南之vue-grid-layout使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了VUE 打包后相对路径的引用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue中的父子组件传值及传方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
本篇文章主要介绍了详解Vue-cli 创建的项目如何跨域请求 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
vue中使用cookies和crypto-js实现记住密码和加密的方法
这篇文章给大家介绍一下关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。2018-10-10
下面小编就为大家分享一篇vue-cli创建的项目,配置多页面的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue如何实现分批加载数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文介绍了如何使用Vite快速搭建Vue项目,强调Vite对Node.js版本有最低要求（>=12.0.0）,提供了环境准备、安装步骤和启动指南,旨在帮助开发者高效启动Vue项目2024-10-10
这篇文章主要介绍了vue3如何在setup中获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本篇文章主要介绍了浅谈mvvm-simple双向绑定简单实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论