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。這種方法有一個缺點(diǎn)，當(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返回值動態(tài)生成表單及提交數(shù)據(jù)的辦法
這篇文章主要為大家介紹了Vue返回值動態(tài)生成表單及提交數(shù)據(jù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue項目的html如何引進(jìn)public里面的js文件
這篇文章主要介紹了vue項目的html如何引進(jìn)public里面的js文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
在vue中，我們在main.ts引入的全局注冊的組件是可以不需要import導(dǎo)入而直接使用的，使用的時候是自己全局注冊組件時的名稱，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊組件,需要的朋友可以參考下2023-05-05
Vue3.2?setup語法糖及Hook函數(shù)基本使用
這篇文章主要為大家介紹了Vue3.2?setup語法糖及Hook函數(shù)基本使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js的Class與樣式綁定,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
近期在做ve3的項目時因為功能需要,需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
項目中我們可能會碰到導(dǎo)出Excel文件的需求，這篇文章主要介紹了vue中導(dǎo)出Excel表格的實現(xiàn)代碼，非常具有實用價值，需要的朋友可以參考下2018-10-10
Axios 是 Javascript 中最受歡迎的 HTTP 庫之一，我們可以用它在 Vue 程序中調(diào)用API。在本文中我們用 Vue 3 和 Axios 寫一個侃爺語錄小應(yīng)用，可以用這個小程序?qū)W習(xí)英語，同時也能從侃爺?shù)脑捴械玫揭恍﹩l(fā)，而且還可以學(xué)習(xí)用 Vue 異步請求API，一舉多得，何樂而不為呢？2021-05-05
這篇文章主要給大家介紹了關(guān)于vue3中如何使用d3.js繪制流程圖的相關(guān)資料,D3.js是由javaScript語言編寫繪圖庫,其原理是通過調(diào)用一系列內(nèi)置函數(shù),生成SVG,并在網(wǎng)頁渲染,需要的朋友可以參考下2023-10-10
Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法
這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08