vue.js iview打包上線后字體圖標不顯示解決辦法
更新時間：2020年01月20日 14:36:26 作者：develop_
這篇文章主要介紹了vue.js iview打包上線后字體圖標不顯示解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
在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
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
組件(Component)是 Vue.js 最強大的功能之一,組件可以擴展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關于Vue封裝全局toast組件,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue簡單練習 桌面時鐘的實現代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值的相關資料,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了vue前端信息詳情頁模板梳理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了在Vue 中使用Typescript的示例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue如何導出頁面為word格式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了Vue2+element-ui使用面包屑導航的正確姿勢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
基于Electron24+Vite4+Vue3搭建桌面端應用實戰(zhàn)教程
這篇文章主要介紹了基于Electron24+Vite4+Vue3搭建桌面端應用,這次給大家主要分享的是基于electron最新版本整合vite4.x構建vue3桌面端應用程序，需要的朋友可以參考下2023-05-05
本文主要介紹了vue router-view嵌套顯示，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
html2canvas是一個JavaScript庫,它可以將HTML元素轉換為Canvas元素本文將介紹一下Vue如何使用html2canvas實現截取圖片并保存功能,需要的可以參考下2023-12-12