項目打包，默認是打包在根目錄下面的。當然我們可以通過設置，打包到任意子目錄中去。 但是，當項目中引入資源的，比如：引入圖片資源、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‘ 這樣的路徑方式來調用圖片。

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