vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法
更新時間：2020年01月20日 14:36:26 作者：develop_
這篇文章主要介紹了vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在vue+cli項目中使用iview組件及icon圖標(biāo)，打包后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圖標(biāo)的地址是否正確
@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
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue動態(tài)添加store、路由和國際化配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue實(shí)現(xiàn)一個簡單的分頁功能實(shí)例詳解
這篇文章主要介紹了vue實(shí)現(xiàn)一個簡單的分頁功能,需要的朋友可以參考下2022-12-12
vue3界面使用router及使用watch監(jiān)聽router的改變
vue2中使用router非常簡單，但是vue3中略微有些改變，通過本文講解下他的改變，對vue3?watch監(jiān)聽router相關(guān)知識感興趣的朋友一起看看吧2022-11-11
這篇文章主要介紹了vue yaml代碼編輯器組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue如何通過button的disabled控制按鈕能否被使用
這篇文章主要介紹了vue如何通過button的disabled控制按鈕能否被使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
如何解決npm i下載依賴的時候出現(xiàn)某依賴版本沖突
這篇文章主要介紹了如何解決npm i 下載依賴的時候出現(xiàn)某依賴版本沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了如何基于vue2實(shí)現(xiàn)簡單的答題組件,點(diǎn)擊正確的選項,該選項背景變綠色；點(diǎn)擊錯誤的選項,該選項背景變紅色,有需要的可以參考下2024-12-12
Vue2中使用自定義指令實(shí)現(xiàn)el-table虛擬列表的代碼示例
在實(shí)際開發(fā)中,我們可能會面臨其他需求,例如在 el-table 中無法使用分頁技術(shù)的情況下展示海量數(shù)據(jù),這種情況下,頁面可能會出現(xiàn)卡頓,嚴(yán)重時甚至可能引發(fā)瀏覽器崩潰,所以針對這個問題本文給大家介紹了vue2中使用自定義指令實(shí)現(xiàn)el-table虛擬列表,需要的朋友可以參考下2025-01-01
vue如何實(shí)現(xiàn)關(guān)閉對話框后刷新列表
這篇文章主要介紹了vue如何實(shí)現(xiàn)關(guān)閉對話框后刷新列表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解Vue 如何監(jiān)聽Array的變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06