Vue打包項目圖片等靜態資源的處理

　　項目打包，默認是打包在根目錄下面的。固然咱們能夠經過設置，打包到任意子目錄中去。 可是，當項目中引入資源的，好比：引入圖片資源、js資源、或者字體圖標之類的。那麼可能在這個中間又會踩坑。

一、在vue文件引入圖片

　　例如，咱們將一張圖片放到資源目錄 /static/image/lyf.jpg 咱們在 vue 文件中用下面的代碼來使用這張圖片。

<img src="static/image/lyf.jpg" alt="">

注意，最前面不要加 / ，若是是這樣操做的話，會變成相對根目錄調用圖片。若是你的項目要打包到子目錄的話，這樣作就會出現問題。

二、在 css 文件中，引用圖片的處理

　　仍是上面那張圖片，咱們須要在 css 中來引用，如何來寫呢？

.love { background-image: url('../static/image/lyf.jpg'); }

　　這裏爲何要加上 ../ 呢？

　　若是是最終打包到根目錄的話，能夠使用 / 這種路徑。這個是徹底能夠理解的。

　　但，若是是打包到子目錄，咱們必須看下生成的最終路徑：

├── index.html └── static ├── css │ └── app.a7a745952a8ca7f8c9413d53b431b8c8.css ├── image │ └── lyf.jpg ├── img │ └── lyf.9125a01.jpg └── js ├── app.39ccc604caeb34166b49.js ├── manifest.b1ad113c36e077a9b54d.js └── vendor.0b8d67613e49db91b787.js

　　如上，咱們能夠看到這個 css 相對 圖片 的路徑的地址。

　　你要疑問了，這樣的相對路徑，咱們能夠使用 ../image/lyf.jpg 來進行調用呀。嗯，看上去能夠，可是，若是是這樣的話，在開發模式中又會出錯了。

　　因此，仍是要用 '../static/image/lyf.jpg' 這樣的路徑方式來調用圖片。