Vite打包項目后圖片丟失的簡單解決方法
1.打包時出現(xiàn)的問題
在使用Vite腳手架開發(fā)項目時，打包后的項目會出現(xiàn)圖片、圖標等靜態(tài)資源丟失問題。比如下面：
我的圖片資源全在src/assets/img目錄中，但是經(jīng)過打包后img文件夾并沒有出現(xiàn)在打包后的項目（dist文件夾）當中，這樣會導致項目部署后找不到資源等一系列的問題。
2.解決方法
方法1：
Vite官網(wǎng)地址：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)建一個腳本，將所有需要的資源引入進來，然后以數(shù)組的形式導出，最后再通過遍歷的形式去使用。（該方法沒試過，但似乎應該差不了多少，哈哈哈哈）。
方法2：
方法2是官網(wǎng)中說的第二種方法，將所有靜態(tài)資源放到public目錄當中，然后打包時會將這些資源一同打包進去，如下面圖片所示：
我的圖片都在public/img目錄當中，打包后會將img文件夾一同打包進項目，如dist文件夾中所示。
官網(wǎng)我只是看了一個大概，總結出這兩種方法，如果大佬們不喜歡用可以自己研究一下，然后大家一起分享吧，哈哈哈哈！
總結
到此這篇關于Vite打包項目后圖片丟失的簡單解決方法的文章就介紹到這了,更多相關Vite打包項目后圖片丟失內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
前端開發(fā)指南之vue-grid-layout的使用實例
vue-grid-layout是一個vue柵格拖動布局的組件,下面這篇文章主要給大家介紹了關于前端開發(fā)指南之vue-grid-layout使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了VUE 打包后相對路徑的引用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue中的父子組件傳值及傳方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本篇文章主要介紹了詳解Vue-cli 創(chuàng)建的項目如何跨域請求 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
vue中使用cookies和crypto-js實現(xiàn)記住密碼和加密的方法
這篇文章給大家介紹一下關于vue中使用cookies和crypto-js如何實現(xiàn)密碼的加密與記住密碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。2018-10-10
vue-cli創(chuàng)建的項目,配置多頁面的實現(xiàn)方法
下面小編就為大家分享一篇vue-cli創(chuàng)建的項目,配置多頁面的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue如何實現(xiàn)分批加載數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文介紹了如何使用Vite快速搭建Vue項目,強調Vite對Node.js版本有最低要求（>=12.0.0）,提供了環(huán)境準備、安裝步驟和啟動指南,旨在幫助開發(fā)者高效啟動Vue項目2024-10-10
這篇文章主要介紹了vue3如何在setup中獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡單實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04