項目打包，默認是打包在根目錄下面的。當然我們可以通過設置，打包到任意子目錄中去。 但是，當項目中引入資源的，比如：引入圖片資源、js資源、或者字體圖標之類的。那么可能在這個中間又會踩坑。
1、在vue文件引入圖片
例如，我們將一張圖片放到資源目錄 /static/image/lyf.jpg 我們在 vue 文件中用下面的代碼來使用這張圖片。
<img src="static/image/lyf.jpg" alt="">
注意，最前面不要加 / ，如果是這樣操作的話，會變成相對根目錄調用圖片。如果你的項目要打包到子目錄的話，這樣做就會出現問題。
2、在 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' 這樣的路徑方式來調用圖片。