1. vue-cli 2.x版本中conf/index文件中路徑的含義
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
assetsRoot
資源根路徑 項(xiàng)目打包后存放的路徑 即項(xiàng)目目錄下的dist文件
assetsSubDirectory
資源子目錄 存放靜態(tài)資源文件的static
assetsPublicPath
資源公共路徑
打包之后的文件路徑為 assetsPublicPath + assetsSubDirectory ：
/static/xxx
2.vue 項(xiàng)目引入圖片
2.1 情況一：圖片在/src/assets目錄下
這時(shí)候圖片會(huì)被webapck打包传黄，我們需要將圖片視為模塊使用隘谣。
1. 圖片地址直接寫(xiě)在html或者css里
圖片地址直接寫(xiě)在html或者css里，使用相對(duì)路徑或者模塊路徑引入資源惫搏，webpack會(huì)幫你處理這個(gè)圖片最終的地址或者base64。
<template>
<!--
相對(duì)路徑 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>
使用絕對(duì)路徑不行抡诞。使用絕對(duì)路徑的時(shí)候會(huì)直接被當(dāng)成字符串斟叼。具體查看webpack關(guān)于路徑處理的文檔
2. 動(dòng)態(tài)引入圖片
當(dāng)動(dòng)態(tài)定義圖片路徑的時(shí)候，url-loader是無(wú)法探測(cè)到圖片路徑的丹莲。
（1）在data里面導(dǎo)入這張圖片
{
logoImage: require('@/assets/logo.png')
}
or
import logoImage from '@/assets/logo.png'
{
logoImage: logoImage
}
上面require 或者 import 的作用就是將圖片引入為模塊光坝，轉(zhuǎn)換編譯為打包后的資源。
（2）然后在template里面對(duì)需要background-image屬性的標(biāo)簽綁定
<img :src="logoImage">
<div :style="{ backgroundImage: `url(${logoImage})` }"></div>
3.2 情況二：圖片在/public目錄下 或者 外部資源甥材。
直接通過(guò)圖片路徑引入即可
<!-- 相對(duì)路徑盯另，在index.html的同級(jí)目錄下查找此圖片 -->
<img src="logo.png">
<!-- 絕對(duì)路徑，/表示編譯后的dist文件夾 -->
<img src="/logo.png">
<div style="background-image: url('login-bg.png');"></div>
<div style="background-image: url('/login-bg.png');"></div>
