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