项目打包，默认是打包在根目录下面的。当然我们可以通过设置，打包到任意子目录中去。 但是，当项目中引入资源的，比如：引入图片资源、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’ 这样的路径方式来调用图片。
项目中的问题:
xxx.vue组件，js，css.html都是使用的打包到浏览器内存中的数据，不是原生页面html，内存中的项目结构，可以参考build后的文件结构，并参照dev配置确定。