vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問題及解決方法
更新時間：2019年10月16日 13:27:46 作者：Linhoonyu的網(wǎng)絡(luò)筆記
這篇文章主要介紹了解決vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問題,本文通過兩種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
做vue項(xiàng)目使用的iviewUI庫，打包上線之后發(fā)現(xiàn)icon都不顯示，然后做了很多嘗試，更改打包路徑等，都沒有太好的效果，最后還是在網(wǎng)上找到了方法：
1. 方法一：
在build/utils.js下面找到這段代碼，將其中publicPath改成…/…/，保存并重新打包。注意：這個路徑不是絕對的，根絕自己的目錄結(jié)構(gòu)來寫
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
2. 方法二：
找到build/webpack.prod.conf.js文件中下面這段代碼，將extract項(xiàng)改成false,保存并重新打包。
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: false,
usePostCSS: true
})
},
總結(jié)：我是通過第一種方法解決的，可以完美解決，這里建議兩種都試一下，如果第二種方法能解決的話，使用第二種，因?yàn)榈诙N方法相對第一種更靈活。
總結(jié)
以上所述是小編給大家介紹的vue-cli+iview項(xiàng)目打包上線之后圖標(biāo)不顯示問題及解決方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
本篇文章主要介紹了用vue封裝插件并發(fā)布到npm的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
本篇文章主要介紹了vue.js $refs和$emit 父子組件交互的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue移動端設(shè)置全屏背景的項(xiàng)目實(shí)踐
本vue移動端項(xiàng)目設(shè)置全屏背景,關(guān)鍵是要找對文件,然后添加background屬性即可,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
vue2項(xiàng)目使用exceljs多表頭導(dǎo)出功能詳解
ExcelJS是一個用于在Node.js和瀏覽器中創(chuàng)建、讀取和修改Excel文件的強(qiáng)大JavaScript庫,下面這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目使用exceljs多表頭導(dǎo)出功能的相關(guān)資料,需要的朋友可以參考下2024-05-05
在vue3版本中，引入了一個新的函數(shù)，叫做setup。本文將通過實(shí)例為大家詳細(xì)講講Vue3.2中setup語法糖的使用，感興趣的小伙伴可以了解一下2022-07-07
使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法
這篇文章主要介紹了使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
Vue組件庫ElementUI實(shí)現(xiàn)表格加載樹形數(shù)據(jù)教程
這篇文章主要為大家詳細(xì)介紹了Vue組件庫ElementUI實(shí)現(xiàn)表格加載樹形數(shù)據(jù)教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue+element 實(shí)現(xiàn)商城主題開發(fā)的示例代碼
這篇文章主要介紹了vue+element 實(shí)現(xiàn)商城主題開發(fā)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
在許多Web應(yīng)用程序中，日歷是一個常見的組件，它通常用于顯示日期、安排會議、查看活動等，在Vue中，我們可以使用第三方庫來輕松實(shí)現(xiàn)日歷功能，也可以手動編寫代碼來實(shí)現(xiàn)日歷的展示和操作，本文將介紹如何使用vue-calendar和手動編寫代碼來實(shí)現(xiàn)日歷功能2023-07-07