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-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），该方法就可以工作

此外，使用looks like而不是使用html-loader可以在类和id中添加哈希，因此，如果页面上有多个内嵌svg，则无需担心名称冲突。

Answer 2

你几乎就在那里，告诉Webpack使用哪个加载器：

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

Answer 3

您可能希望同时使用两个webpack加载器，但也可以使用加载器选项中的以下语法告诉您的html加载器使用div限制v-html个元素：

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

html加载器的文档是found there。

Answer 4

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

yarn add -D html-loader

然后将以下对象添加到Webpack配置文件中的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>

vuejs组件中的内联SVG

4 个答案: