2019獨角獸企業重金招聘Python工程師標準>>>

錯誤原因

• vue-cli中將圖片資源路徑放到了src的assets中，引入圖片路徑寫的相對路徑，打包發生錯誤
• 首先，出錯點在url-loader上面。

// url-loader配置 // build/webpck.base.conf.js { test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') }

• 這里解釋一下上面這段url-loader配置，test是正則匹配規則，匹配項目中所有的以正則規則結尾的格式的文件，直白點就是所以的圖片（png，jpg，jpeg，gif，svg）。然后用url-loader進行處理。處理也有個規則如下，當不大于10000B的文件進行base64轉碼，就是將圖片轉為base64的格式。如果超過10KB的圖片就單獨打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 這個目錄下（從build/utils.js和config/index.js可以知道這個路徑就是static/img目錄，并且圖片名是進行hash之后的值，根目錄下面沒有static目錄，所以會創建一個static目錄，至于為什么最后沒有看見這個目錄后續再說）,當我們創建了一個這樣的目錄之后，所有的圖片訪問路徑就成了對應的static/img/'圖片名'。到這里就可以確定，如果小于10KB的圖片轉為base64，大于10KB的圖片已經將圖片路徑改為了static/img/'圖片名'，然后我們繼續來理清訪問路徑的事情。

// 目前我們的目錄結構

• index.html

• static

  • img------'picname'
  • css------app.css
  • js---------app.js

• 我們知道img為html標簽，他的路徑是由index.html開始訪問的，他走static/img/'圖片名'是能正確訪問到圖片的，所以img的路徑沒問題，然后app.css訪問static/img/'圖片名'是訪問錯誤的，因為在css目錄下并沒有static目錄。這樣就造成了路徑訪問失敗的問題。

• 聲明：引用自vue打包路徑錯誤

解決

• 第一種
  • 將圖片資源放到根目錄文件夾下的static文件夾中，項目名--static--img下即可
  • 引入圖片：<img src = '/static/img/1.png />
  • 引入背景圖片：backgroun-img:url('/static/img/1.png')
• 第二種（建議）
  • 不修改圖片位置，仍在src/assets/img文件夾下
  • 使用相對路徑

轉載于:https://my.oschina.net/yxmBetter/blog/1539721

總結

以上是生活随笔為你收集整理的vue打包后图片路径错误的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。