background: url([object Module]);背景图无法加载url-loader压缩图片配置问题

问题描述

在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