解決vue-cli項目webpack打包后iconfont文件路徑的問題
更新時間：2018年09月01日 15:31:06 作者：qq_33203555
今天小編就為大家分享一篇解決vue-cli項目webpack打包后iconfont文件路徑的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在使用vue-cli創(chuàng)建vue項目時，可以自動生成webpack文件。使用
npm run build
即可打包發(fā)布生產(chǎn)文件，打包后的文件
webpack配置
可以看到使用url-loader處理后的文件是在static目錄下生成fonts目錄下的文件。全部樣式文件打包在css目錄下app.hash.css文件中。
但我們會發(fā)現(xiàn)發(fā)布后，會存在字體文件找不到的問題，查看css文件發(fā)現(xiàn)是iconfont字體文件的路徑引用問題。
解決方法：
在build/utils文件中的下圖所示位置添加../../公共路徑
這樣打包的iconfont字體文件路徑時就會加上../../了。引用就沒問題了。而不再需要手動更改css文件中的路徑。
以上這篇解決vue-cli項目webpack打包后iconfont文件路徑的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天就主要來講一下在vue.config.js中對一些配置的更改，簡單介紹一下loader的使用；用configureWebpack簡單的配置；用chainWebpack做高級配置；包括對loader的添加，修改；以及插件的配置，需要的朋友可以參考下2019-07-07
關(guān)于vue-cli3+webpack熱更新失效及解決
這篇文章主要介紹了關(guān)于vue-cli3+webpack熱更新失效及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue 自動化路由實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
vue3中通過遍歷傳入組件名稱動態(tài)創(chuàng)建多個component 組件
這篇文章主要介紹了vue3中通過遍歷傳入組件名稱動態(tài)創(chuàng)建多個component 組件,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue自定義組件@click點擊失效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue + Scss 動態(tài)切換主題顏色實現(xiàn)換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動態(tài)切換主題顏色實現(xiàn)換膚的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要給大家介紹了關(guān)于前端Uniapp使用Vant打造Uniapp項目避坑的相關(guān)資料,Uniapp結(jié)合Vant可以快速構(gòu)建跨平臺移動應(yīng)用,通過HBuilderX安裝和配置Vant組件,解決了樣式識別問題,并實現(xiàn)了組件的全局注冊,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue 優(yōu)化CDN加速的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
隨著互聯(lián)網(wǎng)的發(fā)展,PDF?文件在信息交流和文檔分享中起著重要的作用,通過在?Vue?組件中實現(xiàn)?PDF?預(yù)覽功能,我們可以為用戶提供便捷的內(nèi)容閱讀體驗,下面我們就來看看具體實現(xiàn)方法吧2023-08-08
這篇文章主要介紹了vue 表單輸入框不支持focus及blur事件的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11