Vite打包項(xiàng)目后圖片丟失的簡單解決方法
1.打包時(shí)出現(xiàn)的問題
在使用Vite腳手架開發(fā)項(xiàng)目時(shí)，打包后的項(xiàng)目會(huì)出現(xiàn)圖片、圖標(biāo)等靜態(tài)資源丟失問題。比如下面：
我的圖片資源全在src/assets/img目錄中，但是經(jīng)過打包后img文件夾并沒有出現(xiàn)在打包后的項(xiàng)目（dist文件夾）當(dāng)中，這樣會(huì)導(dǎo)致項(xiàng)目部署后找不到資源等一系列的問題。
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ā)時(shí)會(huì)是/img.png，在生產(chǎn)構(gòu)建后會(huì)是 /assets/img.2d8efhg.png。這種方法有一個(gè)缺點(diǎn)，當(dāng)圖片資源特別多時(shí)會(huì)很麻煩，需要先創(chuàng)建一個(gè)腳本，將所有需要的資源引入進(jìn)來，然后以數(shù)組的形式導(dǎo)出，最后再通過遍歷的形式去使用。（該方法沒試過，但似乎應(yīng)該差不了多少，哈哈哈哈）。
方法2：
方法2是官網(wǎng)中說的第二種方法，將所有靜態(tài)資源放到public目錄當(dāng)中，然后打包時(shí)會(huì)將這些資源一同打包進(jìn)去，如下面圖片所示：
我的圖片都在public/img目錄當(dāng)中，打包后會(huì)將img文件夾一同打包進(jìn)項(xiàng)目，如dist文件夾中所示。
官網(wǎng)我只是看了一個(gè)大概，總結(jié)出這兩種方法，如果大佬們不喜歡用可以自己研究一下，然后大家一起分享吧，哈哈哈哈！
總結(jié)
到此這篇關(guān)于Vite打包項(xiàng)目后圖片丟失的簡單解決方法的文章就介紹到這了,更多相關(guān)Vite打包項(xiàng)目后圖片丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù)的辦法
這篇文章主要為大家介紹了Vue返回值動(dòng)態(tài)生成表單及提交數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue項(xiàng)目的html如何引進(jìn)public里面的js文件
這篇文章主要介紹了vue項(xiàng)目的html如何引進(jìn)public里面的js文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
在vue中，我們在main.ts引入的全局注冊的組件是可以不需要import導(dǎo)入而直接使用的，使用的時(shí)候是自己全局注冊組件時(shí)的名稱，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊組件,需要的朋友可以參考下2023-05-05
Vue3.2?setup語法糖及Hook函數(shù)基本使用
這篇文章主要為大家介紹了Vue3.2?setup語法糖及Hook函數(shù)基本使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js的Class與樣式綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
近期在做ve3的項(xiàng)目時(shí)因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
項(xiàng)目中我們可能會(huì)碰到導(dǎo)出Excel文件的需求，這篇文章主要介紹了vue中導(dǎo)出Excel表格的實(shí)現(xiàn)代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
如何在 Vue 中使用 Axios 異步請(qǐng)求API
Axios 是 Javascript 中最受歡迎的 HTTP 庫之一，我們可以用它在 Vue 程序中調(diào)用API。在本文中我們用 Vue 3 和 Axios 寫一個(gè)侃爺語錄小應(yīng)用，可以用這個(gè)小程序?qū)W習(xí)英語，同時(shí)也能從侃爺?shù)脑捴械玫揭恍﹩l(fā)，而且還可以學(xué)習(xí)用 Vue 異步請(qǐng)求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)境中修改端口號(hào)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08