1. 程式人生 > >vue-cli靜態資源處理

vue-cli靜態資源處理

cli conf 輸出 index fig static 報錯 分享圖片 問題

  vue-cli是利用webpack進行打包部署,其中靜態資源的路徑問題是一個比較麻煩的部分。

技術分享圖片

  項目中共有兩個存放靜態文件的地方。

  • /static 根目錄下的static文件夾
  • assets src目錄下資源文件夾

  /static 目錄不會被webpack處理,build後復制到disk目錄下,所以.vue中使用/static絕對目錄引用的不會被webpack處理。

  在組件中使用assets中的靜態文件,通常有兩種形式的引用:

    1.img標簽引用 <img src=‘./assets/logo.png‘/>

    2.background背景圖片引用 background:url(./assets/logo.png‘);

  webpack在處理.vue時會搜索這兩類引用,處理方式稍有不同。

  首先判斷是否是絕對路徑開頭,如果是兩種都不作處理,如果為相對路徑先搜索該路徑是否能在src中找到,如找到並且文件較小將被轉為base64格式,如較大將重命名文件並將文件復制到static/img目錄下(./assets/pic.png變為/static/img/pic.3472138.jpg); 如果找不到,img將不做處理原樣輸出,但是background背景圖會報錯。

  

  如果想要打包輸出的內容可在相對目錄中訪問可修改config/index.js中的技術分享圖片

  

vue-cli靜態資源處理