在vue+cli專案中使用iview元件及icon圖示，打包後icon不顯示,解決辦法：

1.在build資料夾下找到utils.js檔案，把publicPath改為 ../../

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

2.在build資料夾下找到webpack.prod.conf.js檔案,修改extract為 false

module: { 
 rules: utils.styleLoaders({ 
 sourceMap: config.build.productionSourceMap,extract: false,usePostCSS: true 
 }) 
},

如果上面兩種方案都沒有解決的話，找到iview.css檔案檢視iview.css中引入font圖示的地址是否正確

@font-face { 
 font-family: Ionicons; 
 src: url(../font/ionicons.eot?v=2.0.0); 
 src: url(../font/ionicons.eot?v=2.0.0#iefix) format("embedded-opentype"),url(../font/ionicons.ttf?v=2.0.0) format("truetype"),url(../font/ionicons.woff?v=2.0.0) format("woff"),url(../font/ionicons.svg?v=2.0.0#Ionicons) format("svg"); 
 font-weight: 400; 
 font-style: normal 
}

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