vue-cli+iview項目打包上線之后圖標不顯示問題及解決方法
更新時間：2019年10月16日 13:27:46 作者：Linhoonyu的網(wǎng)絡(luò)筆記
這篇文章主要介紹了解決vue-cli+iview項目打包上線之后圖標不顯示問題,本文通過兩種方法給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
做vue項目使用的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項改成false,保存并重新打包。
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: false,
usePostCSS: true
})
},
總結(jié)：我是通過第一種方法解決的，可以完美解決，這里建議兩種都試一下，如果第二種方法能解決的話，使用第二種，因為第二種方法相對第一種更靈活。
總結(jié)
以上所述是小編給大家介紹的vue-cli+iview項目打包上線之后圖標不顯示問題及解決方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
在 Vue 3 中，父子組件之間進行通信有多種方式，下面簡單介紹下常見的方式及其用法和使用場景，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2024-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)旋轉(zhuǎn)木馬動畫，圖片數(shù)量無限制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
最近在做uni-app的時候需要用到vant組件，在網(wǎng)上看到了很多的使用vant組件的方法，但是講解的大多繁瑣，或者無法使用，現(xiàn)把最新，最實用的vant組件的使用方法分享給大家,需要的朋友可以參考下2023-02-02
Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹
這篇文章主要介紹了Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
Vue.js中使用Vuex實現(xiàn)組件數(shù)據(jù)共享案例
這篇文章主要介紹了Vue.js中使用Vuex實現(xiàn)組件數(shù)據(jù)共享案例,具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了VUE使用vuex解決模塊間傳值問題 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細介紹了Vue標尺插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)多條件篩選的相關(guān)資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue2實現(xiàn)封裝動態(tài)表單組件，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹
這篇文章主要為大家詳細介紹了vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10