小编Att*_*man的帖子

我已经使用@ 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中为同一规则使用多个加载程序？还是正确的方法？任何帮助，将不胜感激。 …