vuejs 组件中的内联 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>

但问题是它还用内联 svg 代码替换了 <img /> 标签中的 svg src。我想要的是将文件加载器用于 <img src="something.svg" /> 并将 html 加载器用于 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']
})

原文由 Atta ur Rehman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

这将在不更改 vue.config.js 的情况下工作（只要安装了 html-loader）

---

此外，不要使用 html-loader 查看 svg-inline-loader in can add hashes to classes and ids，所以如果你的页面上有多个内联 svg，你不必担心名称冲突。

原文由 Igonato 发布，翻译遵循 CC BY-SA 4.0 许可协议