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路徑問題
   }