如何禁用 <1kb SVGs, due to url-loader?

Question

默认情况下，Nuxt 使用

url-loader

进行 Base64 编码并内联任何小于 1kb 的图像：

https://nuxtjs.org/docs/2.x/directory-struct/assets/#webpack

这是默认 Nuxt 配置的相关部分：

https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js#L383

我想禁用 SVG 的 Base64 内联。

以下是 SVG 如何包含在我的模板中：

    <img
      :src="require(`@/assets/images/${src}`)"
    />

这是我在自己的 Nuxt 配置中的尝试：

export default {
  build: {
    extend(config, { isDev }) {
      config.module.rules = [
        {
          test: /\.svg$/i,
          use: [{
            loader: 'url-loader',
            options: {
              limit: false,
              name: '[path][name].[ext]',
            },
          }],
        },
        ...config.module.rules,
      ];
    },
  },
}

这会导致图像无法在我的开发服务器上渲染：

没有构建错误。禁用 SVG 内联的正确方法是什么？

编辑：

没有得到任何回复，我最终使用这种可怕的方法来循环所有现有规则并明确从中删除

svg

：

export default {
  build: {
    extend(config, { isDev }) {
      config.module.rules = config.module.rules.map(rule => {
        if (rule.test && rule.test.toString().indexOf('svg') > -1) {
          const regex = rule.test;
          rule.test = new RegExp(regex.source.replace('|svg', ''), regex.flags);
        }
        return rule;
      });

      config.module.rules = [
        {
          test: /\.svg$/i,
          use: [{
            loader: 'url-loader',
            options: {
              limit: false,
              name: '[path][name].[ext]',
            },
          }],
        },
        ...config.module.rules,
      ];
    },
  },
}

Answer 1

nuxt.config.ts

内的以下vite配置可防止小资产被内联。

// nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    build: {
      assetsInlineLimit: 0, // This will prevent inlining of any assets
    },
  },
})