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