1. vue-cli 2.x版本中conf/index文件中路径的含义
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
assetsRoot
资源根路径 项目打包后存放的路径 即项目目录下的dist文件
assetsSubDirectory
资源子目录 存放静态资源文件的static
assetsPublicPath
资源公共路径
打包之后的文件路径为 assetsPublicPath + assetsSubDirectory ：
/static/xxx
2.vue 项目引入图片
2.1 情况一：图片在/src/assets目录下
这时候图片会被webapck打包，我们需要将图片视为模块使用。
1. 图片地址直接写在html或者css里
图片地址直接写在html或者css里，使用相对路径或者模块路径引入资源，webpack会帮你处理这个图片最终的地址或者base64。
<template>
<!--
相对路径 or 模块路径
-->
<img src="../assets/logo.png" />
<img src="~@/assets/logo.png" />
</template>
<template>
<div class="logo-container"></div>
<template>
<style lang="scss" scoped>
.logo-container {
background-image: url('../../assets/logo.png');
background-image: url('~@/assets/logo.png');
}
</style>
使用绝对路径不行。使用绝对路径的时候会直接被当成字符串。具体查看webpack关于路径处理的文档
2. 动态引入图片
当动态定义图片路径的时候，url-loader是无法探测到图片路径的。
（1）在data里面导入这张图片
{
logoImage: require('@/assets/logo.png')
}
or
import logoImage from '@/assets/logo.png'
{
logoImage: logoImage
}
上面require 或者 import 的作用就是将图片引入为模块，转换编译为打包后的资源。
（2）然后在template里面对需要background-image属性的标签绑定
<img :src="logoImage">
<div :style="{ backgroundImage: `url(${logoImage})` }"></div>
3.2 情况二：图片在/public目录下 或者 外部资源。
直接通过图片路径引入即可
<!-- 相对路径，在index.html的同级目录下查找此图片 -->
<img src="logo.png">
<!-- 绝对路径，/表示编译后的dist文件夹 -->
<img src="/logo.png">
<div style="background-image: url('login-bg.png');"></div>
<div style="background-image: url('/login-bg.png');"></div>
