我個人喜歡把所有引用文件全部放在打包文件src的同級文件static文件內部，方便整合惠窄。
提醒：vue項目中正常情況下圖片是由
url-loader處理武花，加入了hash值凄吏，如果放到static里面webpack打包后只會把資源復制到發(fā)布目錄而不會把小圖片優(yōu)化為base64短纵。
如果我們使用static目錄存放圖片會以為打包而產(chǎn)生一系列路徑問題
總結來說有以下兩種
使用絕對路徑
===》 開發(fā)環(huán)境正常带污，但是到了生產(chǎn)環(huán)境因為就會全部找不到路徑。
原因：使用絕對路徑打包好依然是絕對路徑香到，但是生產(chǎn)環(huán)境沒有設置根目錄所有無法使用鱼冀。
解決方法：在服務器上設置SCP，即可使用絕對路徑悠就。
<template>
<div>
<h1>HTML直接使用</h1>
<img src="/static/images/b1.jpg" alt="">
<h1>JS使用</h1>
<img :src="imgUrl" alt="">
<h1>css中使用</h1>
<div class="bg"></div>
</div>
</template>
<script> export default {
data () { return {
imgUrl: '/static/images/b2.jpg' }
}
} </script>
<style scoped> .bg{ width: 750px; height: 600px; background:url('/static/images/b3.jpg');
}
</style></pre>
使用相對路徑
===》開發(fā)環(huán)境也正常千绪，但是到了生產(chǎn)環(huán)境只有HTML里面的圖片資源正常。JS和CSS中都找不到路徑
原因：HTML里面的圖片路徑會經(jīng)過vue轉換路徑所有正常顯示梗脾，js因為沒有處理而找不到路徑荸型。所以我們直接幫它處理即可
解決方法：
HTML中使用相對路徑讓vue正常打包轉換路徑；
JS中使用直接設置路徑為打包后應該顯示的路徑
./static/images/b2.jpg即可正常顯示CSS中使用因為打包后代碼都是在 css-- * .css文件中炸茧，所以我們使用
../../static/images/b3.jpg瑞妇。同時還需要修改兩個地方的設置
【build/utils.js文件】
if (options.extract) { return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //新增這一句,作用是設置打包過程中提取CSS的方法
})
} else { return ['vue-style-loader'].concat(loaders)
}
")
【config/index.js 文件】
// 找到build
build: {
assetsSubDirectory: 'static',
assetsPublicPath: '/',
} // 修改為
build: {
assetsSubDirectory: './static',// 子目錄---解決css相對路徑的問題
assetsPublicPath: './', //資源專用路徑---解決JS路徑問題
}
【使用演示】
<template>
<div>
<h1>HTML直接使用</h1>
<img src="../../static/images/b1.jpg" alt="">
<h1>JS使用</h1>
<img :src="imgUrl" alt="">
<h1>css中使用</h1>
<div class="bg"></div>
</div>
</template>
<script> export default {
data () { return {
imgUrl: './static/images/b2.jpg' }
}
} </script>
<style scoped> .bg{ width: 750px; height: 600px; background:url('../../static/images/b3.jpg');
}
</style>
以上就是我整理的使用static目錄存放圖片的解決方案鹉究，如果你有其他好的建議可以聯(lián)系我哦！
