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 v-bind 数据绑定,简单点来说就是对 HTML 中的元素，我们可以使用 v-bind 来进行绑定和动态的数据输出，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue中使用axios实现excel文件下载的功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端，本文给大家分享Vue使用sign-canvas实现在线手写签名，感兴趣的朋友一起看看吧2022-05-05
vue2.0设置proxyTable使用axios进行跨域请求的方法
这篇文章主要介绍了vue2.0设置proxyTable使用axios进行跨域请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
Vue中.env、.env.development及.env.production文件说明
这篇文章主要给大家介绍了关于Vue中.env、.env.development及.env.production文件说明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
今天小编就为大家分享一篇在Vue项目中,防止页面被缩放和放大示例，具有很好的参考 价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
el-form resetFields无效和validate无效的可能原因及解决方法
本文主要介绍了el-form resetFields无效和validate无效的可能原因及解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
vue的v-on与v-bind,v-on就是用于绑定事件的,下面这篇文章主要给大家介绍了关于vue3常用的指令之v-bind和v-on指令用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
vite 这个是尤大开发的新工具,目的是以后替代webpack,下面这篇文章主要给大家介绍了关于如何创建基于vite的vue项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-11-11
过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下2022-11-11
最新评论