vue+webpack靜態資源路徑引用

處理靜態資產

    你可能已經注意到，在項目結構中我們有兩個靜態資產目錄：src/assets和static/。他們之間有什么區別？

    要回答這個問題，我們首先需要了解Webpack如何處理靜態資產。在*.vue組件中，您的所有模板和CSS都會被解析vue-html-loader並css-loader查找資產URL。例如，在<img src="./logo.png">和中background: url(./logo.png)，"./logo.png"是一個相對資產路徑，將由Webpack解析為模塊依賴項。

    因為logo.png不是JavaScript，當被視為模塊依賴時，我們需要使用url-loader和file-loader處理它。此模板已經為您配置了這些加載器，因此您可以免費獲得文件名指紋識別和條件base64內聯等功能，同時可以使用相對/模塊路徑而無需擔心部署。

    由於這些資產可能在構建期間內聯/復制/重命名，因此它們本質上是源代碼的一部分。這就是為什么建議將Webpack處理的靜態資源放在/src其他源文件中。實際上，您甚至不需要全部放入/src/assets：您可以使用它們基於模塊/組件來組織它們。例如，您可以將每個組件放在其自己的目錄中，其靜態資源就在它旁邊。

 

“真正的”靜態資產

    相比之下，static/Webpack根本不處理文件：它們按原樣直接復制到最終目標，文件名相同。必須使用絕對路徑引用這些文件，絕對路徑由join build.assetsPublicPath和build.assetsSubDirectoryin 確定config.js。

    例如，使用以下默認值：

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

    放入的任何文件static/都應使用絕對URL引用/static/[filename]。

    注意：如果更改assetSubDirectory為assets，則需要將這些URL更改為/assets/[filename]

 

應用：

    在src/components/ele.vue中，data數據里引入文件數據

imgsUrl:[
          {src:'../static/imgs/02.jpg'},
          {src:'./static/imgs/03.jpg'},
          {src:'http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg'}
     ]

    第一行為相對路徑，第二行為使用絕對URL引用./static/[filename]，第三行為網上圖片路徑。

    建議做法為：絕對URL引用./static/[filename]

 

補充：

    在原來的絕對URL引用/static/[filename]基礎上，在最之前添加了一個點.，因為vue項目打包后，如果不加.，無法正確獲取圖片等靜態資源路徑。

 

 

.