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