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)文章

Vue3中父子傳參常見方式及用法
在 Vue 3 中，父子組件之間進行通信有多種方式，下面簡單介紹下常見的方式及其用法和使用場景，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2024-01-01
vue實現(xiàn)旋轉(zhuǎn)木馬動畫
這篇文章主要為大家詳細介紹了vue實現(xiàn)旋轉(zhuǎn)木馬動畫，圖片數(shù)量無限制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-07-07
在uni-app中使用vant組件的方法
最近在做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解決模塊間傳值問題的方法
本篇文章主要介紹了VUE使用vuex解決模塊間傳值問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
Vue標尺插件使用詳解
這篇文章主要為大家詳細介紹了Vue標尺插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
vue實現(xiàn)多條件篩選超簡潔代碼
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)多條件篩選的相關(guān)資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下
2023-09-09
vue2實現(xiàn)封裝動態(tài)表單組件
這篇文章主要介紹了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