background: url([object Module]);背景圖無法載入url-loader壓縮圖片配置問題

水冗水孚發表於2023-01-15
Object

問題描述

在vue.config.js檔案中使用url-loader壓縮圖片以後，啟動專案，發現背景圖載入不出來了，F12審查dom發現背景圖的的url變成物件模組了，如下圖：

問題分析

url-loader使用的是ES的模組化語法，就是import 'xxx'；如下官方文件截圖：

可是vue在被編譯後，使用的是CommonJS模組化語法，就是require('xxx')。二者有衝突，不一致，就會導致無法讀取圖片檔案了。

解決方案

  • 既然是vue專案，就讓url-loader的配置與vue保持一致即可，所以關閉esModule，使用vue的規則即可。
  • 既然esModule選項預設為true，那麼改為false就行了（關閉了es模組化語法）`

^_^

程式碼如下

chainWebpack(config) {
    // ......
    config.module.rule("images").test(/\.(jpg|jpeg|png|gif|ico)$/) 
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 1024 * 12,
        name: "static/img/[name].[ext]",
        esModule: false // 這裡，置為false即可
      })
}
A good memory is better than a bad pen. Write it down

相關文章