Встроенный SVG в компоненте vuejs

Question

Я создал проект Vuejs с использованием @ vue / cli версии 3.0.0-beta.16, и в моем отдельном файловом компоненте Home.vue я хочу импортировать и добавить встроенный SVG в шаблон, но у меня возникают проблемы при этом.

Проблема в том, что vue cli уже использует расширение файла .svg для загрузчика файлов, например так:

webpackConfig.module
  .rule('svg')
    .test(/\.(svg)(\?.*)?$/)
    .use('file-loader')
      .loader('file-loader')
      .options({
        name: getAssetPath(options, `img/[name].[hash:8].[ext]`)
      })

Я уже пробовал использовать плагин html-loader для включения svg в шаблони он работает нормально, если я очищаю использование svg по умолчанию в моем vue.config.js и добавляю свой собственный загрузчик следующим образом:

// vue.config.js

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
    .test(/\.(svg)$/)
    .use('html-loader')
    .loader('html-loader')
    .options({
    })
}

и в моем шаблоне:

// Home.vue

<div v-html="require('./../assets/inline.svg')"></div>

Нопроблема в том, что он также заменяет svg src в тегах <img /> на встроенный svg-код.Я хочу использовать file-loader для <img src="something.svg" /> и html-loader для require('./inline.svg').Как использовать несколько загрузчиков для одного и того же правила в веб-пакете?Или это правильный подход?Буду признателен за любую помощь.

Редактировать Я думаю, проблема в том, что я добавляю оба загрузчика неправильно.Вот как я добавляю их в свой файл:

// vue.config.js

svgRule
.test(/\.(svg)$/)
.use('file-loader')
.loader('file-loader')
.options({
  name: getAssetPath(options, `img/[name].[ext]`)
})

svgRule
.test(/\.(svg)$/)
.use('html-loader')
.loader('html-loader')
.options({
  attrs: ['div:v-html']
})

Answer 1

Если у вас не установлена ​​html-loader, просто выполните

yarn add -D html-loader

Затем добавьте следующий объект в массив rules в файле конфигурации вашего веб-пакета:

{
  test: /\.svg$/,
  use: [{ loader: 'html-loader' }]
}

И, наконец, вы сможете импортировать svg файлы в свои скрипты с помощью встроенного загрузчика.

require('!html-loader!./../assets/inline.svg')

// or directly in your v-html directive
<div v-html="require('!html-loader!./../assets/inline.svg')"></div>

Answer 2

Возможно, вы захотите использовать оба загрузчика веб-пакетов, а также указать своему загрузчику html ограничение div элементов с v-html со следующим синтаксисом в параметрах загрузчика:

{
  attrs: ['div:v-html']
}

Документы длязагрузчик html найден там .

Answer 3

Вы можете добавить начальный ! в выражении require для «переопределения» существующих загрузчиков, настроенных в конфигурации webpack.

<div v-html="require('!html-loader!./../assets/inline.svg')"></div>

Это будет работать без изменений в vue.config.js (до тех пор, покапоскольку установлен html-загрузчик)

---

Кроме того, вместо использования html-загрузчика, посмотрите в svg-inline-loader , в котором можно добавлять хэши к классам и идентификаторам, так чтоне нужно беспокоиться о конфликтах имен, если у вас есть несколько встроенных svgs на вашей странице.

Answer 4

Вы почти у цели, просто скажите Webpack, какой загрузчик использовать:

<div v-html="require('html-loader!./../assets/inline.svg')"/>