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

【问题标题】：Vue Cli 3 is not allowing me to process SVG's in WebpackVue Cli 3 不允许我在 Webpack 中处理 SVG
【发布时间】：2018-09-02 16:44:04
【问题描述】：

对于 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 字符串/路径导入到我的组件中，而它应该是一个具有属性的对象。

非常感谢。

【问题讨论】：

嘿，迈克尔，已经有一段时间了。你找到答案了吗？
是的，我做到了。我可以发誓我回答了。无论如何，下面的用户有正确的方法。您需要使用 Webpack 链从默认设置中完全删除默认正则表达式，然后添加您自己的规则。尽管设置了您的规则，但在您删除已设置的规则之前它不会起作用。与已设置的规则（如 SVG）相匹配的自定义规则不会被覆盖。
这是我的确切问题。 +1

标签： javascript webpack vue.js vuejs2 vue-cli

【解决方案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')
  }
}

【讨论】：

【解决方案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')
}

【讨论】：

请注意。您可以使用 <svg> <use xlink:href="#youriconfilename" /> </svg> 引用您的 svg
@eay 上面是正确的但是你需要加载你想要替换的模块然后清除然后添加see this example in the docs

【解决方案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'
      })
  }
};

【讨论】：

【解决方案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 也建议使用相同的方法。

【讨论】：