vue 開發常用工具及配置七:處理資源載入問題

  • 2020 年 1 月 14 日
  • 筆記

目錄

  • 1 資源載入
    • 1.1 處理 img.src 這樣的資源屬性
    • 1.2 在內嵌樣式中 background-image 如何載入
    • 1.3 在樣式塊中 background-image 如何載入
  • 2 與資源載入有關的兩個載入器
    • 2.1 url-loader
    • 2.2 file-loader
  • 3 關於如何選擇優先在哪裡配置的問題
  • 源碼

1 資源載入

1.1 處理 img.src 這樣的資源屬性

Vue Loader 編譯單文件組件中的 <template> 塊時,它也會將所有遇到的資源 URL 轉換為 webpack 模組請求。

例如,下面的模板程式碼片段:

<img src="../image.png">  

將會被編譯成為:

createElement('img', {    attrs: {      src: require('../image.png')    }  })  

require('../image.png') 這是一個模組的請求了。

除了 img.src 還有哪些標籤的屬性,會自動轉為模組請求,這是由 Vue Loader 模組的 transformAssetUrls 定義的。

transformAssetUrls 默認值為:

{    video: ['src', 'poster'],    source: 'src',    img: 'src',    image: ['xlink:href', 'href'],    use: ['xlink:href', 'href']  }  

由於有編譯時模組的自動轉換,所以下面三行程式碼的組件效果是一致的:

<img src="../assets/logo.svg"/>  <img src="@/assets/logo.svg"/>  <img :src="require('../assets/logo.svg')"/>  

第二行可以@符號,因為vue.config.js有關於別名的配置,@相當於src

運行效果:

1.2 在內嵌樣式中 background-image 如何載入

style內聯樣式中直接引用資源是不行的:

<div style="background-image:url('@/assets/logo.svg')"></div>  

urlcss語法,background-image屬性也不在vue-loader插件的自動轉換匹配之列。

有人是寫一個data變數,但如果這個變數僅是此處使用一次,聲明反而迂腐了。可以直接使用require關鍵字實現:

<div :style="{backgroundImage:'url('+require('@/assets/logo.svg')+')'}"></div>    

1.3 在樣式塊中 background-image 如何載入

這是在template中的方法,因為可以直接使用require關鍵字,如果是在樣式文件或在style程式碼塊內呢,此時require關鍵字不得使用?

如果這樣使用:

<style lang="less" scoped>  .button1{    background-image:url('@/assets/logo.svg')  }    </style>  

是不行的,程式會報編譯錯誤。但如果這樣使用:

.button1{    background-image:url('[email protected]/assets/logo.svg');  }  

就可以了。僅在路徑前端加一個~符號。在style block內可以使用,在獨立的 style file中相信也可以使用。

資源 URL 轉換會遵循如下規則:

1,如果路徑以 @ 開頭,會被看作模組依賴,將啟用插件載入資源。這時候在 webpack 配置中給 @ 配置 alias,就很有用了。

2,如果路徑以 ~ 開頭,其後的部分將會被看作模組依賴。

3,如果路徑以 . 開頭,將會被看作相對的模組依賴。

4,如果路徑是絕對路徑,例如 /images/foo.png,會原樣保留。

2 與資源載入有關的兩個載入器

file-loader用於實現文件載入,url-loader用於實現data urlurl路徑的轉換控制。

2.1 url-loader

url-loader works like file-loader, but can return a DataURL if the file is smaller than a byte limit.

如果圖片大小小於某值,直接以data url形式內嵌於html標籤內。在vue.config.js文件中的樣例配置為:

configureWebpack: {      ...      module:{        rules:[          {            test: /.(png|jpg|gif)$/i,            use: [              {                loader: 'url-loader',                options: {                  limit: 8192,                },              },            ],          },        ]      }    },  

如果不想使用data url這種形式,可以將值改小。

2.2 file-loader

該插件讓import、require發揮作用。在vue.config.js文件中的典型配置為:

configureWebpack: {      ...      module:{        rules:[          {              test: /.(png|jpe?g|gif)$/i,              use: [                {                  loader: 'file-loader',                },              ],          },        ]      }    },  

3 關於如何選擇優先在哪裡配置的問題

除了常規配置,深度配置 webpack 有兩種方式:

configureWebpack

該節點可以是對象也可以是函數。如果這個值是一個對象,則會通過 webpack-merge 合併到最終的配置中。這是優先選用它的原因。

chainWebpack

這是一個函數,會接收一個基於 webpack-chain 的 ChainableConfig 實例。允許對內部的 webpack 配置進行更細粒度的修改。

對於 CSS 相關 loader 來說,我們推薦使用 css.loaderOptions 而不是直接鏈式指定 loader。這是因為每種 CSS 文件類型都有多個規則,而 css.loaderOptions 可以確保你通過一個地方影響所有的規則。

所以對於之前關於 less 全局變數的實現,有兩種方式,以第二種在 css.loaderOptions 中設置為佳。

源碼

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200103

參考鏈接

  • https://vue-loader.vuejs.org/zh/options.html#transformasseturls
  • https://github.com/webpack-contrib/file-loader
  • https://github.com/webpack-contrib/url-loader

《基於 vue+go 如何快速進行業務迭代?》