Vue svg加载程序与Vue 3

Question

请告诉我，为什么vue-svg加载程序与vue 3一起工作不正确，或者我做错了什么？我将设置添加到vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
})

然后我导入svg并尝试将其作为组件添加到模板中

<template>
  <YoutubeIcon />
</template>
<script setup>
import YoutubeIcon from '@/assets/Icons/youtube.svg'
</script>

在这些步骤之后，我在控制台中得到错误

未能对"Document"执行"createElement"：提供的标记名称('/img/youtube.9fd81e7d.svg'(不是有效的名称。

版本：

vue: "^3.2.13"
vue-loader: "17.0.0"
vue-svg-loader: "^0.17.0-beta.2" // stable version doesn't work either

Answer 1

我在vue-svg加载插件的github页面上找到了问题的解决方案

chainWebpack: config => {
    config.module.rules.delete('svg')
    config.module
      .rule('svg')
      .test(/.(svg)(?.*)?$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }

现在svg正确加载

Answer 2

经过几个小时的搜索和尝试，我找到了一个解决方案。

软件包.json

"vue": "^3.2.13",
"vue-loader": "^17.0.1",
"svg-vue3-loader": "^1.0.2"

vue.config.js

  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.delete('type');
    svgRule.delete('generator');
    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('svg-vue3-loader')
      .loader('svg-vue3-loader');
  },