Vite打包項目后圖片丟失的簡單解決方法
1.打包時出現(xiàn)的問題
在使用Vite腳手架開發(fā)項目時，打包后的項目會出現(xiàn)圖片、圖標(biāo)等靜態(tài)資源丟失問題。比如下面：
我的圖片資源全在src/assets/img目錄中，但是經(jīng)過打包后img文件夾并沒有出現(xiàn)在打包后的項目（dist文件夾）當(dāng)中，這樣會導(dǎo)致項目部署后找不到資源等一系列的問題。
2.解決方法
方法1：
Vite官網(wǎng)地址：https://cn.vitejs.dev/guide/assets.html#importing-asset-as-url
在需要的使用圖標(biāo)的地方去引入，比如：
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrlimgUrl在開發(fā)時會是/img.png，在生產(chǎn)構(gòu)建后會是 /assets/img.2d8efhg.png。這種方法有一個缺點，當(dāng)圖片資源特別多時會很麻煩，需要先創(chuàng)建一個腳本，將所有需要的資源引入進(jìn)來，然后以數(shù)組的形式導(dǎo)出，最后再通過遍歷的形式去使用。（該方法沒試過，但似乎應(yīng)該差不了多少，哈哈哈哈）。
方法2：
方法2是官網(wǎng)中說的第二種方法，將所有靜態(tài)資源放到public目錄當(dāng)中，然后打包時會將這些資源一同打包進(jìn)去，如下面圖片所示：
我的圖片都在public/img目錄當(dāng)中，打包后會將img文件夾一同打包進(jìn)項目，如dist文件夾中所示。
官網(wǎng)我只是看了一個大概，總結(jié)出這兩種方法，如果大佬們不喜歡用可以自己研究一下，然后大家一起分享吧，哈哈哈哈！
總結(jié)
到此這篇關(guān)于Vite打包項目后圖片丟失的簡單解決方法的文章就介紹到這了,更多相關(guān)Vite打包項目后圖片丟失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了VUE v-bind 數(shù)據(jù)綁定,簡單點來說就是對 HTML 中的元素，我們可以使用 v-bind 來進(jìn)行綁定和動態(tài)的數(shù)據(jù)輸出，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
vue使用axios實現(xiàn)excel文件下載的功能
這篇文章主要介紹了vue中使用axios實現(xiàn)excel文件下載的功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
Vue使用sign-canvas實現(xiàn)在線手寫簽名的實例
sign-canvas?一個基于?canvas?開發(fā),封裝于?Vue?組件的通用手寫簽名板(電子簽名板),支持?pc?端和移動端，本文給大家分享Vue使用sign-canvas實現(xiàn)在線手寫簽名，感興趣的朋友一起看看吧2022-05-05
vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請求的方法
這篇文章主要介紹了vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vue中.env、.env.development及.env.production文件說明
這篇文章主要給大家介紹了關(guān)于Vue中.env、.env.development及.env.production文件說明的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-09-09
今天小編就為大家分享一篇在Vue項目中,防止頁面被縮放和放大示例，具有很好的參考 價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
el-form resetFields無效和validate無效的可能原因及解決方法
本文主要介紹了el-form resetFields無效和validate無效的可能原因及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue的v-on與v-bind,v-on就是用于綁定事件的,下面這篇文章主要給大家介紹了關(guān)于vue3常用的指令之v-bind和v-on指令用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vite 這個是尤大開發(fā)的新工具,目的是以后替代webpack,下面這篇文章主要給大家介紹了關(guān)于如何創(chuàng)建基于vite的vue項目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
過濾器的功能是對要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示,其并沒有改變原本的數(shù)據(jù),只是產(chǎn)生新的對應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-11-11