Vite打包項目后圖片丟失的簡單解決方法
1.打包時出現的問題
在使用Vite腳手架開發(fā)項目時,打包后的項目會出現圖片、圖標等靜態(tài)資源丟失問題。比如下面:

我的圖片資源全在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在開發(fā)時會是/img.png,在生產構建后會是 /assets/img.2d8efhg.png。這種方法有一個缺點,當圖片資源特別多時會很麻煩,需要先創(chuàng)建一個腳本,將所有需要的資源引入進來,然后以數組的形式導出,最后再通過遍歷的形式去使用。(該方法沒試過,但似乎應該差不了多少,哈哈哈哈)。
方法2:
方法2是官網中說的第二種方法,將所有靜態(tài)資源放到public目錄當中,然后打包時會將這些資源一同打包進去,如下面圖片所示:

我的圖片都在public/img目錄當中,打包后會將img文件夾一同打包進項目,如dist文件夾中所示。
官網我只是看了一個大概,總結出這兩種方法,如果大佬們不喜歡用可以自己研究一下,然后大家一起分享吧,哈哈哈哈!
總結
到此這篇關于Vite打包項目后圖片丟失的簡單解決方法的文章就介紹到這了,更多相關Vite打包項目后圖片丟失內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
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
el-form resetFields無效和validate無效的可能原因及解決方法
本文主要介紹了el-form resetFields無效和validate無效的可能原因及解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08

