vue.js组件中的内联SVG

Question

我已经使用@ vue / cli版本3.0.0-beta.16创建了一个Vuejs项目，并且在我的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，并且如果我在vue.config.js中清除svg的默认用法并添加自己的加载器，则可以正常工作：

// 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>

但是问题是它也<img />用内联svg代码替换了标签中的svg src 。我想要的是使用file-loader <img src="something.svg" />和使用html-loader require('./inline.svg')。如何在Webpack中为同一规则使用多个加载程序？还是正确的方法？任何帮助，将不胜感激。

编辑 我认为问题是我以错误的方式添加了两个加载程序。这是我将它们添加到文件中的方式：

// 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

您可以!在require表达式中添加前导，以“覆盖”由webpack配置设置的现有加载程序。

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

vue.config.js只要不进行任何更改（只要安装了html-loader即可）

另外，与其使用html-loader ，还不如查看svg-inline-loader可以向类和ID添加哈希，因此，如果您的页面上有多个内嵌svg，则无需担心名称冲突。

Answer 2

如果您还没有html-loader安装，只需执行

yarn add -D html-loader

然后将以下对象添加到ruleswebpack 配置文件中的数组中：

{
  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 3

你就快完成了，只需告诉 Webpack 使用哪个加载器即可：

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