vue項目使用static目錄存放圖片解決方案

 

我我的喜歡把全部引用文件所有放在打包文件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 便可正常顯示

• 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目錄存放圖片的解決方案，若是你有其餘好的建議能夠聯繫我哦！