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>
url是css語法，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('~@/assets/logo.svg'); }
就可以了。僅在路徑前端加一個~符號。在style block內可以使用，在獨立的 style file中相信也可以使用。
資源 URL 轉換會遵循如下規則：
1，如果路徑以 @ 開頭，會被看作模組依賴，將啟用插件載入資源。這時候在 webpack 配置中給 @ 配置 alias，就很有用了。
2，如果路徑以 ~ 開頭，其後的部分將會被看作模組依賴。
3，如果路徑以 . 開頭，將會被看作相對的模組依賴。
4，如果路徑是絕對路徑，例如 /images/foo.png，會原樣保留。
2 與資源載入有關的兩個載入器
file-loader用於實現文件載入，url-loader用於實現data url與url路徑的轉換控制。
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 如何快速進行業務迭代？》
