解決vue-cli項(xiàng)目webpack打包后iconfont文件路徑的問題
更新時(shí)間：2018年09月01日 15:31:06 作者：qq_33203555
今天小編就為大家分享一篇解決vue-cli項(xiàng)目webpack打包后iconfont文件路徑的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
在使用vue-cli創(chuàng)建vue項(xiàng)目時(shí)，可以自動生成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字體文件路徑時(shí)就會加上../../了。引用就沒問題了。而不再需要手動更改css文件中的路徑。
以上這篇解決vue-cli項(xiàng)目webpack打包后iconfont文件路徑的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Token是身份驗(yàn)證后服務(wù)端返回的令牌,常用于訪問授權(quán)API和頁面權(quán)限校驗(yàn),Token數(shù)據(jù)可存儲在本地或Vuex中,本地存儲可實(shí)現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue登錄成功之后的token處理詳細(xì)步驟,需要的朋友可以參考下2024-10-10
用戶可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無重名的文件,如果有會返回重名文件的名稱數(shù)組,這些文件需要一個(gè)一個(gè)的向用戶確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下2024-02-02
vue使用JSEncrypt對密碼本地存儲時(shí)加解密的實(shí)現(xiàn)
本文主要介紹了vue使用JSEncrypt對密碼本地存儲時(shí)加解密，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
下面小編就為大家分享一篇Vue-路由導(dǎo)航菜單欄的高亮設(shè)置方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了vue axios封裝以及API統(tǒng)一管理 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue控制多行文字展開收起的實(shí)現(xiàn)示例（也叫控制文字展開隱藏），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue 清空input標(biāo)簽 中file的值操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能
這篇文章主要介紹了antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Vue實(shí)現(xiàn)一個(gè)帶有緩存功能的Tab頁簽功能
在現(xiàn)代?Web?應(yīng)用中,Tab?頁簽功能是非常常見的一種交互模式,它可以幫助用戶在不同的視圖間快速切換,而不會丟失當(dāng)前視圖的狀態(tài),本文將介紹如何在?Vue?項(xiàng)目中實(shí)現(xiàn)一個(gè)帶有緩存功能的?Tab?頁簽功能,需要的朋友可以參考下2024-08-08