第一種方法：
原因:
首先，出錯點在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目錄。這樣就造成了路徑訪問失敗的問題。
我的解決方法是：
把圖片放在static下面
這樣打包以后正確
第二種方法：
如果是確定了url是哪個，就可以用這個方法
publicPath：是在webpack.config.js文件的output選項中，主要作用就是處理靜態文件路徑的。
1 output:{ 2 path:path.resolve(__dirname,'dist'), 3 filename:'[name].js', 4 publicPath: "http://192.168.0.102:1717/" 5 }
這樣打包以后，路徑就由相對路徑變成絕對路徑了
#tupian { background-image: url(http://192.168.0.102:1717/images/b3422d7fb5ba566d1cb9e81efb0e9d7e.jpg); width: 100px; height: 100px; -webkit-transform: rotate(7deg); transform: rotate(7deg); } <link href=http://192.168.0.102:1717/css/index.css?f6342111d1d5bcbaeb6f rel=stylesheet></head> <body> <div id=tLess></div> <div><img src=http://192.168.0.102:1717/images/e3c36035f62cb73913b6a45eeb934dc1.jpg></div> <div id=tupian></div> <div id=title></div> <script type=text/javascript src=http://192.168.0.102:1717/entry.js?f6342111d1d5bcbaeb6f></script><script type=text/javascript src=http://192.168.0.102:1717/entry2.js?f6342111d1d5bcbaeb6f></script></body>
工作中推薦使用這個方法
第三個方法：
把背景圖片放到其他服務器上，直接引用