前提：在元件中使用引用圖片，用於<img src>  或者  背景圖片background;

當我們利用vue-cli 搭建好專案的框架，開始高高興興開發元件的時候，有的時候想加一張圖片，或者

在樣式中加個背景，會發現，圖片引用不進來，這可愁壞了不是；

元件中引用圖片用於 <img src="???">

使用圖片之前，我們可以這麼做，在元件的script 中引入圖片，下面示例引入一張圖片：

<script>import skate2 from "../assets/img/skate2.png"export default { name:"SkateTop"}</script>

匯入我們的圖片之後就可以在<img src="??">的地址中加上我們的地址就行了；

元件中樣式中引入背景圖片：

這個你可能會問，上面不是說了怎麼引入圖片了麼，我用上面的方式也能加上背景圖片啊，有什麼問題麼？

問題可大了， 你現在是在本地開發，貌似沒問題，當你開發完丟到伺服器一看，背景圖片咋沒了，好奇怪啊，

好吧，問題在於：我們要修改一個東西：

看到沒，找到這個utils.js 檔案，圖片都截給你了，找不到那就沒辦法了；

開啟這個檔案；

// Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', //加上這麼一句就可以了 fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }

看到了吧，加上這麼一句話就OK了，這裡說的是基於vue-cli搭建的目錄，注意咯！

好了，關鍵點已經詳述，自己嘗試吧！