webpack打包后iconfont文件路徑問題解決


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

npm run build

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

 

 可以看到使用url-loader處理后的文件是在static目錄下生成fonts目錄下的文件。全部樣式文件打包在css目錄下app.hash.css文件中。 
但我們會發現發布后,會存在字體文件找不到的問題,查看css文件發現是iconfont字體文件的路徑引用問題。 

 

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

 

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM