问题形容

在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