Vue Cli 3 не позволяет мне обрабатывать SVG в Webpack

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 / пути, когда это должен быть объект со свойствами.

Большое спасибо.


webpack javascript vue.js vuejs2 vue-cli
person Michael Giovanni Pumo    schedule 23.03.2018    source источник
comment
Привет, Майкл, давно прошло. Вы нашли ответ?   -  person Joel Hernandez    schedule 01.04.2018
comment
Да. Я мог поклясться, что ответил на это. В любом случае, у пользователя, указанного ниже, есть правильный метод. Вам нужно использовать цепочку Webpack, чтобы полностью удалить регулярное выражение по умолчанию из настройки по умолчанию, а затем добавить свое собственное правило. Несмотря на то, что вы вводите свои правила, они не будут работать, пока вы не удалите уже установленные. Пользовательские правила, соответствующие уже установленным (например, SVG), не отменяются.   -  person Michael Giovanni Pumo    schedule 20.04.2018
comment
Это точный вопрос, который у меня был. +1   -  person John Smith    schedule 24.05.2018

Ответы (4)


arrow_upward
10
arrow_downward

Мне потребовалось время, чтобы найти решение. В основном вам нужно остановить сопоставление файлового загрузчика на .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')
  }
}

person Dom Walker    schedule 20.04.2018

arrow_upward
3
arrow_downward

В документацию Webpack для бета-версии Vue CLI 3.0 добавлен пример того, как заменить существующий базовый загрузчик. Для svg-sprite-loader это означает, что вам нужно добавить в vue.config.js следующую конфигурацию:

chainWebpack: config => {
  config.module
    .rule('svg')
    .use('file-loader')
    .loader('svg-sprite-loader')
}
person eay    schedule 18.05.2018
comment
Просто на заметку. Вы можете восстановить свой SVG с помощью <svg> <use xlink:href="#youriconfilename" /> </svg> - person bashkovpd; 02.09.2018
comment
@eay Вышеуказанное верно, но вам нужно загрузить модуль, который вы хотите заменить, затем очистить и добавить см. этот пример в документации - person hitautodestruct; 02.12.2018

arrow_upward
2
arrow_downward

Я использую 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'
      })
  }
};
person ChucKN0risK    schedule 21.09.2018

arrow_upward
1
arrow_downward

Документы Vue CLI для версии 3.x в webpack предлагает использовать что-то вроде этого:

// 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 предлагает такой же подход.

person R3ctor    schedule 08.07.2019