升级 Vue 应用程序后 require() 方法的不同输出

Question

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

以下代码导致不同的输出：

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

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

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

新更新输出：

/img/logo.82b9c7a5.png

我不确定是由于 vue-cli 或 @babel 还是任何其他依赖项。请帮我弄清楚这个问题。我已经在 Git.

中推送了这两个应用程序的基本样板

Answer 1

Vue CLI 4 使用 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，returns 文件的解析路径 URL。

Vue CLI 使用 fixed inline limit set at 4096 bytes for the url-loader. The logo in your example is 6849 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 应用程序后 require() 方法的不同输出

Different output for require() method after upgrading Vue Application

webpack

vue.js

babel-loader

vue-cli