最近在做软件开发的后台应用时，在.vue 文件中的style中的css中想引入assets文件夹中的图片资源，总是报错，但是通过ws时候自动提示能找到。然后再浏览中发现打不开。
.banner-area{
display: none;
position: absolute;
width: 500px;
left: 0;
top: 0;
bottom: 0;
background-size: cover !important;
background-position: center center;
background-image: url('../../assets/logo-banner.png')
}
解决办法：
.banner-area{
display: none;
position: absolute;
width: 500px;
left: 0;
top: 0;
bottom: 0;
background-size: cover !important;
background-position: center center;
background-image: url('~@/assets/logo-banner.png')
}
注意：
@ is an alias to /src
使用vue-cli脚手架的话，会自带这个配置；
如果是自己使用webpack的话，可以在webpack.base.conf.js文件中设置一个webpack的路径别名
resolve: {
alias: {
'@': path.resolve(__dirname, '../src')
}
}
原因分析：
开发模式下，图片地址就是相对当前的vue文件地址，生产模式下的图片地址是在发布路径下的。
打包后引用图片的路径
编译后所有非require引入的图片都被编译到/dist/img/目录下面，并且重命名，引用路径亦已改变，路径随图片文件位置和引用图片的文件的位置而调整了。
而require引入的图片则生成了图片base64编码，图片路径就是图片base64编码。
1、背景图路径
编译打包后生成的背景图路径格式为: ../img/##.png，
编译打包后所有的样式代码在css目录的文件中，引用图片的文件是样式文件，引用图片的路径是样式文件相对于图片位置的路径，所以由'../img'开头。
2、图片路径
编译后的<img>引用路径格式是: /img/##.png，和背景图的引用路径不一样。
引用图片的文件是html，html文件在根目录，所以引用路径由'/img'开头。
3、图片base64编码
使用require引入的图片，经编译后直接生成了图片base64编码。
推荐的图片存放方式
1 如果图片小于8k（webpack配置里设置压缩大小），会被压缩成base64格式，建议直接放在这个组件同级目录