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' 这样的路径方式来调用图片。