Vite打包項(xiàng)目后圖片丟失的簡(jiǎn)單解決方法
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)目后圖片丟失的簡(jiǎn)單解決方法的文章就介紹到這了,更多相關(guān)Vite打包項(xiàng)目后圖片丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端開發(fā)指南之vue-grid-layout的使用實(shí)例
vue-grid-layout是一個(gè)vue柵格拖動(dòng)布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了VUE 打包后相對(duì)路徑的引用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue中的父子組件傳值及傳方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
詳解Vue-cli 創(chuàng)建的項(xiàng)目如何跨域請(qǐng)求
本篇文章主要介紹了詳解Vue-cli 創(chuàng)建的項(xiàng)目如何跨域請(qǐng)求 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
vue中使用cookies和crypto-js實(shí)現(xiàn)記住密碼和加密的方法
這篇文章給大家介紹一下關(guān)于vue中使用cookies和crypto-js如何實(shí)現(xiàn)密碼的加密與記住密碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。2018-10-10
vue-cli創(chuàng)建的項(xiàng)目,配置多頁面的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue-cli創(chuàng)建的項(xiàng)目,配置多頁面的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue如何實(shí)現(xiàn)分批加載數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)分批加載數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文介紹了如何使用Vite快速搭建Vue項(xiàng)目,強(qiáng)調(diào)Vite對(duì)Node.js版本有最低要求（>=12.0.0）,提供了環(huán)境準(zhǔn)備、安裝步驟和啟動(dòng)指南,旨在幫助開發(fā)者高效啟動(dòng)Vue項(xiàng)目2024-10-10
這篇文章主要介紹了vue3如何在setup中獲取DOM元素問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡(jiǎn)單實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04