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

Question

Vue Cli默认file-loader为SVG资产,但我想使用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')
  }
}