升级vue应用程序后，require（）方法的不同输出

发布于 2025-01-25 14:41:14 字数 874 浏览 3 评论 0原文

我有一个带有webpack和旧babel版本的vue应用程序。当我将其升级到vue-cli和new @babel时，它为图像输出意外结果。

以下代码结果不同输出：

require('./assets/logo.png')

旧应用程序（必需）输出：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c...

新的更新输出：

/img/logo.82b9c7a5.png

我不确定是否是由于vue-cli或@babel或任何其他依赖关系。请帮助我找出这个问题。我在GIT中推出了这2个应用程序的基本样板。

webpack
with vue-cli appp

原文

I've a Vue Application with webpack and old babel version. When I upgraded it to vue-cli and new @babel, it output unexpected result for images.

Following Code results different output:

require('./assets/logo.png')

Old Application (Required) Output:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c...

New Update Output:

/img/logo.82b9c7a5.png

I'm not sure, whether it is due to the vue-cli or @babel or any other dependencies. Please help me to figure out this problem.
I've pushed basic boilerplate for these 2 applications in Git.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寂寞美少年 2025-02-01 14:41:14

VUE CLI 5不使用url-loader和file-loader

您需要使用此代码：

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

ps：set maxsize to - 1如果要存储文件而不是它们的哈希

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

回复收藏 0 原文

彩虹直至黑白 2025-02-01 14:41:14

VUE CLI 4使用 url-loader 图像URL（专门用于*。PNG，*。jpg，*。jpeg，*。 *。WebP）。如果导入的图像在尺寸限制范围内，则将图像列为数据URL 。否则，它将传递到 file> file-loader ，将已解决的路径URL返回到文件中。

vue cli使用a 固定的内联限制设置为4096字节 url-loader。 logo示例中的徽标是6849 bytes bytes ，超过内联限制，导致其作为路径URL加载。

您可以使用以下 vue cli config file （需要在您的情况下创建）：

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

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
      })
  },
}

回复收藏 0 原文

~没有更多了~