vue打包 element-icons.woff 和element-icons.ttf 字體文件路徑錯誤,導致icon圖標顯示成小方塊的問題。


出現打包后icon圖標變成小方塊的原因只有兩個

一。element-ui版本和element-ui/lib/theme-chalk/index.css版本不一致。

解決辦法:

卸載已經有的element-ui

npm uninstall element-ui

然后在安裝新的

npm install element-ui

 

二。打包后的 element-icons.woff 和element-icons.ttf 字體文件路徑錯誤
我的訪問路徑多了css/static/fonts/

結果就變成了dist/static/css/static/fonts/element-icons.535877f.woff   (錯誤路徑)

網上搜了半天所有的答案好像都是復制的一樣。。。。。。。

都是大概如下這樣:

當然如果你的問題這兩部就可以解決的話那當然很好。

 

可是我的vue配置的generateLoaders()方法里沒有 ExtractTextPlugin.extract()

我的 generateLoaders()方法如下,

通過 MiniCssExtractPlugin.loader配置如下

我本地親測:

 

 

然后 webpack.base.conf.js 

最后在打包之后的dist文件夾如下:

訪問字體文件的路徑也變成了如下:

完美解決。為了解決這個問題花費了點時間。希望我的幫助可以節省點你的時間。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM