[Vuejs]-Different output for require() method after upgrading Vue Application

by

1👍

✅

Vue CLI 4 uses url-loader for image URLs (specifically for *.png,*.jpg,*.jpeg, *.gif, and *.webp). If an imported image is within a size limit, the image is inlined as a data URL. Otherwise, it’s passed onto file-loader, which returns the resolved path URL to the file.

Vue CLI uses a fixed inline limit set at 4096 bytes for the url-loader. The logo in your example is 6849 bytes, which exceeds the inline limit, causing it be to loaded as a path URL.

You can change the inline limit with the following Vue CLI config file (needs to be created in your case):

// <projectRoot>/vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        options.limit = 8 * 1024 // 8KiB
        return options
      })
  },
}
👤tony19

3👍

Vue CLI 5 does not use url-loader and file-loader

You need to use this code:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .set('parser', {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8KiB
          }
        })
  }
}

PS: set maxSize to -1 if you want to store the files instead of their hashes

👤Boris Maslennikov

Leave a comment