1.在CSS中引入圖片
?

#slider1 {background-image: url(./bg02.jpg);background-size: cover; }

注意：此處的圖片與索引文件在同一個目錄下;

在開發環境下背景圖片是可以好好的顯示的，但是打包后提示找不到資源，報錯：

解決的方法有兩種：暴力的和柔和的

（1）開始使用暴力的方法，在配置文件（webpack.base.conf.js）中設置限制參數

{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 4192,name: utils.assetsPath('img/[name].[ext]')}},

極限參數，代表如果圖片小于大約4K則會自動幫你壓縮成BASE64編碼的圖片，否則拷貝文件到生產目錄，這里如果將限制值設置很大的話，頁面上所有的圖片都會壓縮成BASE64的圖片，這樣的話就不會涉及到路徑的問題，當然這種暴力的方法會給瀏覽器帶來很大的壓力。

（2）現在說說柔和的方法，稍微查一下原因就應該知道，CSS引入圖片再打包后，風格裝載機無法設置自己的publicPath，所以只要改變風格裝載機中的publicPath即可，一行代碼即可以搞定，

找到建/ util.js中文件中ExtractTextPlugin的CSS路徑，手動添加publicPath參數，

if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath: '../../',fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}

重新bulid一下就OK了，我比較喜歡第二種方法，比較方便。

總結

以上是生活随笔為你收集整理的vue-cli中解决css引用图片打包后找不到文件资源的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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