原文:Vue項目之背景圖片打包后路徑錯誤

第一種方法: 原因: 首先,出錯點在url loader上面。 這里解釋一下上面這段url loader配置,test是正則匹配規則,匹配項目中所有的以正則規則結尾的格式的文件,直白點就是所以的圖片 png,jpg,jpeg,gif,svg 。然后用url loader進行處理。處理也有個規則如下,當不大於 B的文件進行base 轉碼,就是將圖片轉為base 的格式。如果超過 KB的圖片就單獨打包 ...

2017-06-08 16:22 0 7710 推薦指數:

查看詳情

vue圖片路徑,和背景圖片路徑打包錯誤解決

最近在研究vue,老實的按照官網提供的,搭建的了 webpack+vue+vuex+vue-router,,因為是自己搭建的,所以踩了不少坑,一般問題百度都有,這個背景圖片的問題,查了很久才解決。 1、找到 config->index.js里面,如下修改 2、找到 build-> ...

Tue Dec 12 00:00:00 CST 2017 0 12901
vue項目打包后資源相對引用路徑的和背景圖片路徑問題

vue項目中若要使用相對路徑來獲得相應靜態資源, 在一般項目 build 之后都會生成一個 index.htm 文件和 一個 static 文件夾,而 static 這個文件夾需要被放置在根目錄下, 1.需要找到config --- index.js(webpack 是依據index.js ...

Tue Dec 18 19:20:00 CST 2018 0 2927
解決Vue打包背景圖片路徑錯誤問題

1.原因解析 當用vue-cli自動構建項目后,有兩種運行方法,分別是:   npm run dev : 提供一個開發的環境,自動熱更新,資源使用絕對路徑,所以可以正常看到背景圖片。   npm run build : 打包項目,資源使用相對路徑,所以會出現路徑錯誤問題。 注: 絕對路徑 ...

Thu Mar 22 21:30:00 CST 2018 0 7903
vue webpack打包后.css文件里面的背景圖片路徑錯誤解決方法

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

Thu Jan 11 23:52:00 CST 2018 1 17710
webpack配置-打包背景圖片路徑問題

問題 項目在開發環境下工作正常,當打包圖片不見了,檢查元素后發現路徑出錯了。圖片路徑是這樣:background: url(/static/img/bg_camera_tip.bd37151.png),但該路徑下文件並不存在。 打包后文件目錄如下: 可以看到背景圖片路徑應該是 ...

Wed Dec 05 23:45:00 CST 2018 0 936
vue-cli打包項目后路徑錯誤問題

一、問題描述 執行 npm run build 命令后,打包生成dist文件夾,訪問的時候報如下錯誤: 二、解決辦法 在根目錄下,新建 vue.config.js文件,內容如下, 再次打包,順利訪問: ...

Mon Mar 16 03:50:00 CST 2020 0 1141
vue項目打包到服務器,背景圖片出現404

打包之后會把圖片變成base64格式,但是如果所有圖片包括一些比較大的圖片都轉的話,反而會浪費資源,因此在build/webpack.base.conf.js里面可以配置圖片格式轉換的限制大小, 可知生成圖片的地址配置是在util.js中,所以在build中找到util.js文件,添加 ...

Tue Mar 17 18:30:00 CST 2020 0 763
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM