之前在打包react項目時發現一些問題,打包出來后我的一部分png圖標加載不出來,開發者模式發現他們的路徑中莫名其妙混入了我在react-router路由中使用<Browserrouter>的路由名稱,網上看到有一種方法是使用Hashrouter,但我的一些功能不允許因此這個方式自然不行,但是我卻發現另一個問題,同樣的png圖片為什么偏偏那幾個出不來,我進入開發者模式發現另外那些顯示正常的png圖片全部被轉換成了base64,所以不存在加載靜態資源的問題,那為什么不把這幾個顯示錯誤的也把他們轉換為base64呢。這個時候我發現在react打包后的build文件夾里,static文件夾里有了一個media文件夾
在里面我發現了所有顯示不正常的圖片,繼而發現凡是顯示不正常的圖片都在這個文件夾里以路徑的方式載入,但又因為<Browserrouter>的某種不知名原因,導致實際上並不能正確加載他們。這些圖片有一個共同點,就是體積相對顯示正常的png圖片體積較大,有幾十K左右,於是果然發現這是webpack在打包時候的配置規則,找到項目目錄node_modules文件夾下的這個路徑
更改圖中高亮這個文件
適當調高limit值即可將圖片轉換為base64而不會存在路徑問題