在使用vue-cli創建vue項目時，可以自動生成webpack文件。使用

npm run build

即可打包發布生產文件，打包后的文件

webpack配置

可以看到使用url-loader處理后的文件是在static目錄下生成fonts目錄下的文件。全部樣式文件打包在css目錄下app.hash.css文件中。

但我們會發現發布后，會存在字體文件找不到的問題，查看css文件發現是iconfont字體文件的路徑引用問題。

解決方法：

在build/utils文件中的下圖所示位置添加../../公共路徑

這樣打包的iconfont字體文件路徑時就會加上../../了。引用就沒問題了。而不再需要手動更改css文件中的路徑。

以上這篇解決vue-cli項目webpack打包后iconfont文件路徑的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com