Vue elementui字體圖標顯示問題解決方案

更新時間：2020年08月18日 11:21:26 作者：niniHan

這篇文章主要介紹了Vue elementui字體圖標顯示問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

問題如下

在build/utils.js下找到

if (options.extract) {
  return ExtractTextPlugin.extract({
   use: loaders,
   fallback: 'vue-style-loader',
   publicPath: '../../'
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }

加上

publicPath: '../../'　　　　　　　

運行項目還是不行，Failed to decode downloaded font: http://192.168.11.110:8081/dist/static/font 路徑也是對的

網上搜了很多，大部分說是后臺經過maven的filter，會破壞font文件的二進制文件格式，導致前臺解析出錯

但是我的是運行在本地環(huán)境下，還沒有進行打包部署

解決方式：

在maven文件的pom文件的build標簽加入下面的

<plugin> 
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-resources-plugin</artifactId> 
  <configuration> 
     <nonFilteredFileExtensions> 
       <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
       <nonFilteredFileExtension>woff</nonFilteredFileExtension> 
       <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
     </nonFilteredFileExtensions> 
   </configuration> 
</plugin>

重啟項目，這樣應該就可以了

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue3中使用ref標簽對組件進行操作方法
這篇文章主要介紹了Vue3中使用ref標簽對組件進行操作方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
vuex操作state對象的實例代碼
這篇文章主要介紹了vuex操作state對象的實例代碼,本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
2018-04-04
詳解基于vue-cli3.0如何構建功能完善的前端架子
這篇文章主要介紹了詳解基于vue-cli3.0如何構建功能完善的前端架子，本文整合出具備基礎功能的前端架子，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
利用vue控制元素的顯示與隱藏
大家都知道在vue中我們可以使用v-if或者v-show去做隱藏顯示,下面這篇文章主要給大家介紹了關于如何利用vue控制元素的顯示與隱藏的相關資料,需要的朋友可以參考下
2022-12-12
深入了解Vue使用vue-qr生成二維碼的方法
這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
基于electron+vue3+ts搭建桌面端應用并且可以熱更新
這篇文章主要為大家詳細介紹了如何基于electron+vue3+ts搭建桌面端應用并且可以熱更新,文中的示例代碼講解詳細,感興趣的小伙伴可以參考下
2023-10-10
用 Vue.js 遞歸組件實現可折疊的樹形菜單(demo)
通過本文給您演示一下如何有效地使用遞歸組件，我將通過建立一個可擴展/收縮的樹形菜單的來一步步進行。下面通過本文給大家分享用 Vue.js 遞歸組件實現可折疊的樹形菜單，需要的朋友參考下吧
2017-12-12
vue?LogicFlow更多配置選項示例詳解
這篇文章主要為大家介紹了vue?LogicFlow更多配置選項詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
基于Vue技術實現遞歸組件的方法
這篇文章主要為大家詳細介紹了基于Vue技術實現遞歸組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
vue的webcamjs集成方式
這篇文章主要介紹了vue的webcamjs集成方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11