乐趣区

关于webpack:background-urlobject-Module背景图无法加载urlloader压缩图片配置问题

问题形容

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

退出移动版