Vue Cli 3 不允许我在 Webpack 中处理 SVG

Question

对于 SVG 资源，Vue Cli 默认为 file-loader，但我想改用 svg-sprite-loader（以及其他一些）。

我更新了 vue.config.js 文件来执行此操作，它似乎仍然使用 file-loader。几乎就像它根本没有获取我的配置一样。

vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(svg)(\?.*)?$/,
          use: [
            {
              loader: 'svg-sprite-loader',
              options: {
                name: '[name]-[hash:7]',
                prefixize: true
              }
            },
            'svg-fill-loader',
            'svgo-loader'
          ]
        }
      ]
    }
  }
}

我的设置有问题吗？

我仍然将 SVG 文件作为 URL 字符串/路径导入到我的组件中，而它应该是具有属性的对象。

非常感谢。

Answer 1

我花了一段时间才找到解决方法。基本上你需要停止 .svg 上的文件加载器匹配。我发现最好的方法是使用 chainWebpack 并从文件加载器的测试方法返回 false。我已经包含了我的工作配置。

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(svg)(\?.*)?$/,
          use: [
            {
              loader: 'svg-inline-loader',
              options: {
                limit: 10000,
                name: 'assets/img/[name].[hash:7].[ext]'
              }
            }
          ]
        }
      ]
    }
  },
  chainWebpack: config => {
    config.module
      .rule('svg')
      .test(() => false)
      .use('file-loader')
  }
}

Answer 2

Vue CLI 3.0 beta 的 Webpack 文档已更新，其中包含有关如何 replace an existing Base Loader 的示例。对于 svg-sprite-loader 这意味着您必须将以下配置添加到您的 vue.config.js:

chainWebpack: config => {
  config.module
    .rule('svg')
    .use('file-loader')
    .loader('svg-sprite-loader')
}

Answer 3

我正在使用 Vue CLI 3.0.3，这个配置适合我

const path = require('path');
const glob = require('glob');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new SpriteLoaderPlugin()
    ]
  },
  chainWebpack: config => {
    config.module.rules.delete('svg');

    config
      .entry('app')
      .clear()
      .add(path.resolve(__dirname, './src/main.ts'))

    config
      .entry('sprite')
      .add(...glob.sync(path.resolve(__dirname, `./src/assets/icons/*.svg`)));

    config.module.rule('svg')
      .test(/\.(svg)(\?.*)?$/)
      .use('file-loader')
      .loader('svg-sprite-loader')
      .options({
        extract: true,
        spriteFilename: 'icons.svg'
      })
  }
};

Answer 4

webpack 部分的 3.x 版本的 Vue CLI 文档建议使用如下内容：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // clear all existing loaders.
    // if you don't do this, the loader below will be appended to
    // existing loaders of the rule.
    svgRule.uses.clear()

    // add replacement loader(s)
    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
}

甚至 vue-svg-loader configuration guide 也建议使用相同的方法。

Vue Cli 3 不允许我在 Webpack 中处理 SVG

Vue Cli 3 is not allowing me to process SVG's in Webpack

javascript

webpack

vue.js

vuejs2

vue-cli