webpack+vuecli打包常見的2個坑


第一個坑: 一般情況下,通過webpack+vuecli默認打包的css、js等資源,路徑都是絕對的。但當部署到帶有文件夾的項目中,這種絕對路徑就會出現問題,因為把配置的static文件夾當成了根路徑,那么要解決這種問題,就得引用相對路徑。

 

解決辦法

打開webpack.prod.conf.js

找到output增加 publicPath: './', 即可,如圖。

背景圖片的引用問題

 

webpack打包在會把圖片轉換成base64,在設置里面,limit超過10000就不會轉換,不管事調大limit還是壓縮圖片都不能很好的滿足需求。

上面雖然解決了資源路徑的引用問題,但是資源里面的背景圖片,不像index.html中加載資源一樣,通過./static/js/app.js引用可以正常加載,背景圖片資源是通過css加載的,如 background: url("../../assets/images/logo-index.png") no-repeat;被相對打包后變成了url(static/img/logo-index.2f00bf2.png) no-repeat所以我們要保留css引用圖片的正常路徑,即:

url(../../static/img/logo-index.2f00bf2.png) no-repeat

  添加如圖所示的一行代碼,這樣不論是字體還是圖片的引用問題都能解決。

來源https://www.cnblogs.com/moqiutao/p/7496718.html


免責聲明!

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



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