我個人喜歡把所有引用文件全部放在打包文件src的同級文件static文件內部,方便整合。
提醒:vue項目中正常情況下圖片是由
url-loader
處理,加入了hash值,如果放到static裏面webpack打包後只會把資源複製到發佈目錄而不會把小圖片優化爲base64。
如果我們使用static目錄存放圖片會以爲打包而產生一系列路徑問題
總結來說有以下兩種
使用絕對路徑
===》 開發環境正常,但是到了生產環境因爲就會全部找不到路徑。
-
原因:使用絕對路徑打包好依然是絕對路徑,但是生產環境沒有設置根目錄所有無法使用。
-
解決方法:在服務器上設置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>
使用相對路徑
===》開發環境也正常,但是到了生產環境只有HTML裏面的圖片資源正常。JS和CSS中都找不到路徑
原因:HTML裏面的圖片路徑會經過vue轉換路徑所有正常顯示,js因爲沒有處理而找不到路徑。所以我們直接幫它處理即可
解決方法:
-
HTML中使用相對路徑讓vue正常打包轉換路徑;
-
JS中使用直接設置路徑爲打包後應該顯示的路徑
./static/images/b2.jpg
即可正常顯示 -
【build/utils.js文件】
-
CSS中使用因爲打包後代碼都是在 css-- * .css文件中,所以我們使用
../../static/images/b3.jpg
。同時還需要修改兩個地方的設置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目錄存放圖片的解決方案,如果你有其他好的建議可以聯繫我哦!